J'ai créé une page d'accueil pour mon site Web avec un aperçu de tous les aspects. Pour le moment, il n'y a que des images avec des hyperliens, mais j'aimerais ajouter des informations supplémentaires sur chaque lien dans un div spécifique lorsque vous survolez l'image. Je suis d'accord avec l'utilisation de JavaScript si c'est plus facile de cette façon. J'ai seulement ajouté du texte pour #xchat, et pas pour le reste, pour l'essayer. Voici le CSS:

<style>
  .explanation {
    height: 50px;
    width: 200px;
    border: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #xclicker, #xchat, #xtictactoe, #xboxpusher, #xhome, #xtba {
    display:none;
  }
  .clicker:hover ~ .explanation #xclicker {
    display:block;
  }
  .chat:hover ~ .explanation #xchat {
    display:block;
  }
  .tictactoe:hover ~ .explanation #xtictactoe {
    display:block;
  }
  .boxpusher:hover ~ .explanation #xboxpusher {
    display:block;
  }
  .home:hover ~ .explanation #xhome {
    display:block;
  }
  .tba:hover ~ .explanation #xtba {
    display:block;
  }
</style>

Et voici le HTML

   <div class="table">
      <table>
        <tr>
          <div class="clicker"><td><a href="http://clickergame.codingcunts.tk/"><img class="clicker" 
          src="https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F16e7ded1-7077-44ff-bb9b-761df94dbe2c_be329c84-14b9-47d3-922f-f3d0a3e48d3e.image.png?v=1603204301587" 
          onmouseover="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F16e7ded1-7077-44ff-bb9b-761df94dbe2c_be329c84-14b9-47d3-922f-f3d0a3e48d3e.image.png?v=1603204608049'" 
          onmouseout="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F16e7ded1-7077-44ff-bb9b-761df94dbe2c_be329c84-14b9-47d3-922f-f3d0a3e48d3e.image.png?v=1603204301587'"/></a></td></div>
          <td><a href="https://chat.codingcunts.tk/"><img class="chat" 
          src="https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Ficon-chat-1.jpg?v=1603199957138" 
          onmouseover="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Ficon-chat-1.png?v=1603204077277'" 
          onmouseout="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Ficon-chat-1.jpg?v=1603199957138'"/></a></td>
          <td><a href="https://tictactoe.codingcunts.tk/"><img class="tictactoe" 
          src="https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Fdownload%20(3).png?v=1603201070846" 
          onmouseover="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Fhoverdownload%20(3).png?v=1603204165481'" 
          onmouseout="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Fdownload%20(3).png?v=1603201070846'"/></a></td>
        </tr>
        <tr>
          <td><a href="https://boxpusher.codingcunts.tk/"><img class="boxpusher"
          src="https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Fgifts_icons-02.png?v=1603206732414"
          onmouseover="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Fhovergifts_icons-02.png?v=1603206784942'" 
          onmouseout="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Fgifts_icons-02.png?v=1603206732414'"/></a></td>
          <td><a href="https://home.codingcunts.tk/"><img class="home" 
          src="https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F25694.svg?v=1603184266071" 
          onmouseover="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Fhousehover.png?v=1603204252655'" 
          onmouseout="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F25694.svg?v=1603184266071'"/></a></td>
          <td><a href="https://home.codingcunts.tk/"><img class="tba"
          src="https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-question-mark-in-circle-png.png?v=1603200311478" 
          onmouseover="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-questiohovern-mark-in-circle-png.png?v=1603203875976'" 
          onmouseout="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-question-mark-in-circle-png.png?v=1603200311478'"/></a></td>
        </tr>
        <tr>
          <td><a href="https://home.codingcunts.tk/"><img class="tba"
          src="https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-question-mark-in-circle-png.png?v=1603200311478" 
          onmouseover="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-questiohovern-mark-in-circle-png.png?v=1603203875976'" 
          onmouseout="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-question-mark-in-circle-png.png?v=1603200311478'"/></a></td>
          <td><a href="https://home.codingcunts.tk/"><img class="tba"
          src="https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-question-mark-in-circle-png.png?v=1603200311478" 
          onmouseover="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-questiohovern-mark-in-circle-png.png?v=1603203875976'" 
          onmouseout="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-question-mark-in-circle-png.png?v=1603200311478'"/></a></td>
          <td><a href="https://home.codingcunts.tk/"><img class="tba"
          src="https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-question-mark-in-circle-png.png?v=1603200311478" 
          onmouseover="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-questiohovern-mark-in-circle-png.png?v=1603203875976'" 
          onmouseout="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-question-mark-in-circle-png.png?v=1603200311478'"/></a></td>
        </tr>
      </table>
    </div>
    <div class="explanation">
      <p id="xclicker">clicker</p>
    </div>
  </div>

Toute aide est grandement appréciée. Merci d'avance.

0
SinglePaper 20 oct. 2020 à 20:04

2 réponses

Meilleure réponse

Tu peux le faire:

<!-- Some images -->
<img style="height: 50px;" 
     src="https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-question-mark-in-circle-png.png?v=1603200311478" 
     onmouseover="explanation.innerHTML = 'Help';" 
     onmouseout="explanation.innerHTML = '';">

<img style="height: 50px;"
     src="https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F25694.svg?v=1603184266071'"
     onmouseover="explanation.innerHTML = 'Home';"
     onmouseout="explanation.innerHTML = '';">
    
<!-- The explanation div -->
<div id="explanation" ></div>

Bien sûr, vous pouvez ajouter du style à tous les éléments.

1
NatNath 20 oct. 2020 à 17:25

J'espère que c'est ce que vous essayez d'accomplir

 <!DOCTYPE html>
 <html>
 <head>
    <style>
        .explanation {
          height: 50px;
          width: 200px;
          border: 2px solid black;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .explanation #xclicker{
          display:none;
        }
        .clicker:hover ~ .explanation #xclicker{
          display:block;
        }
      </style>
 </head>
 <body>
 <div class="table">
     <div class="clicker">
      <table>
        <tr>
          <td><a href="https://home.codingcunts.tk/"><img class="tba" width="50" height="50"
      src="https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-question-mark-in-circle-png.png?v=1603200311478" 
      onmouseover="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-questiohovern-mark-in-circle-png.png?v=1603203875976'" 
      onmouseout="this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-question-mark-in-circle-png.png?v=1603200311478'"/></a></td>
    </tr>
      </table>
    </div>
    <div class="explanation">
      <p id="xclicker">clicker</p>
    </div>
  </div>
 </body>
 </html>
0
VaibhavDN 20 oct. 2020 à 17:33