How do I make text appear in a div when I hover over another?

Question

I have made a homepage for my website with an overview of all of the aspects. Right now, there's only images with hyperlinks, but I'd like to add extra information about each link in a specific div when you hover over the image. I am okay with using JavaScript if it is easier that way. I have only added some text for #xchat, and not for the rest, to try it out. Here is the 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>

And here is the 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>

Any help is greatly appreciated. Thanks in advance.

Welcome to SO. Do yourself a favour - use centralised JavaScript in a .js file. Your HTML is really hard to read with all that (duplicative) inline JS right now. — Mitya, Oct 20 '20 at 17:05
You can visit this link, it might be helpful. https://stackoverflow.com/questions/14263594/how-to-show-text-on-image-when-hovering — Sunil Shah, Oct 20 '20 at 17:21

score 1 · Accepted Answer · answered Oct 20 '20 at 17:25

You can do this:

<!-- 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>

Of course, you can add style to all elements.

score 1 · Answer 2 · answered Oct 20 '20 at 17:33

I am hoping this is what you are trying to achieve

 <!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>

How do I make text appear in a div when I hover over another?

2 Answers2