title: How do I make text appear in a div when I hover over another?
body: <p>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:</p>
  <pre><code>&lt;style&gt;
    .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;
    }
  &lt;/style&gt;
  </code></pre>
  <p>And here is the HTML</p>
  <pre><code>   &lt;div class=&quot;table&quot;&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;div class=&quot;clicker&quot;&gt;&lt;td&gt;&lt;a href=&quot;http://clickergame.codingcunts.tk/&quot;&gt;&lt;img class=&quot;clicker&quot; 
            src=&quot;https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F16e7ded1-7077-44ff-bb9b-761df94dbe2c_be329c84-14b9-47d3-922f-f3d0a3e48d3e.image.png?v=1603204301587&quot; 
            onmouseover=&quot;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'&quot; 
            onmouseout=&quot;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'&quot;/&gt;&lt;/a&gt;&lt;/td&gt;&lt;/div&gt;
            &lt;td&gt;&lt;a href=&quot;https://chat.codingcunts.tk/&quot;&gt;&lt;img class=&quot;chat&quot; 
            src=&quot;https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Ficon-chat-1.jpg?v=1603199957138&quot; 
            onmouseover=&quot;this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Ficon-chat-1.png?v=1603204077277'&quot; 
            onmouseout=&quot;this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Ficon-chat-1.jpg?v=1603199957138'&quot;/&gt;&lt;/a&gt;&lt;/td&gt;
            &lt;td&gt;&lt;a href=&quot;https://tictactoe.codingcunts.tk/&quot;&gt;&lt;img class=&quot;tictactoe&quot; 
            src=&quot;https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Fdownload%20(3).png?v=1603201070846&quot; 
            onmouseover=&quot;this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Fhoverdownload%20(3).png?v=1603204165481'&quot; 
            onmouseout=&quot;this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Fdownload%20(3).png?v=1603201070846'&quot;/&gt;&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;a href=&quot;https://boxpusher.codingcunts.tk/&quot;&gt;&lt;img class=&quot;boxpusher&quot;
            src=&quot;https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Fgifts_icons-02.png?v=1603206732414&quot;
            onmouseover=&quot;this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Fhovergifts_icons-02.png?v=1603206784942'&quot; 
            onmouseout=&quot;this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Fgifts_icons-02.png?v=1603206732414'&quot;/&gt;&lt;/a&gt;&lt;/td&gt;
            &lt;td&gt;&lt;a href=&quot;https://home.codingcunts.tk/&quot;&gt;&lt;img class=&quot;home&quot; 
            src=&quot;https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F25694.svg?v=1603184266071&quot; 
            onmouseover=&quot;this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2Fhousehover.png?v=1603204252655'&quot; 
            onmouseout=&quot;this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F25694.svg?v=1603184266071'&quot;/&gt;&lt;/a&gt;&lt;/td&gt;
            &lt;td&gt;&lt;a href=&quot;https://home.codingcunts.tk/&quot;&gt;&lt;img class=&quot;tba&quot;
            src=&quot;https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-question-mark-in-circle-png.png?v=1603200311478&quot; 
            onmouseover=&quot;this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-questiohovern-mark-in-circle-png.png?v=1603203875976'&quot; 
            onmouseout=&quot;this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-question-mark-in-circle-png.png?v=1603200311478'&quot;/&gt;&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;a href=&quot;https://home.codingcunts.tk/&quot;&gt;&lt;img class=&quot;tba&quot;
            src=&quot;https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-question-mark-in-circle-png.png?v=1603200311478&quot; 
            onmouseover=&quot;this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-questiohovern-mark-in-circle-png.png?v=1603203875976'&quot; 
            onmouseout=&quot;this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-question-mark-in-circle-png.png?v=1603200311478'&quot;/&gt;&lt;/a&gt;&lt;/td&gt;
            &lt;td&gt;&lt;a href=&quot;https://home.codingcunts.tk/&quot;&gt;&lt;img class=&quot;tba&quot;
            src=&quot;https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-question-mark-in-circle-png.png?v=1603200311478&quot; 
            onmouseover=&quot;this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-questiohovern-mark-in-circle-png.png?v=1603203875976'&quot; 
            onmouseout=&quot;this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-question-mark-in-circle-png.png?v=1603200311478'&quot;/&gt;&lt;/a&gt;&lt;/td&gt;
            &lt;td&gt;&lt;a href=&quot;https://home.codingcunts.tk/&quot;&gt;&lt;img class=&quot;tba&quot;
            src=&quot;https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-question-mark-in-circle-png.png?v=1603200311478&quot; 
            onmouseover=&quot;this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-questiohovern-mark-in-circle-png.png?v=1603203875976'&quot; 
            onmouseout=&quot;this.src='https://cdn.glitch.com/17adc8fb-ebe3-48f0-9734-f3611ee24069%2F121-1215914_question-mark-icons-question-mark-in-circle-png.png?v=1603200311478'&quot;/&gt;&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;div class=&quot;explanation&quot;&gt;
        &lt;p id=&quot;xclicker&quot;&gt;clicker&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p>Any help is greatly appreciated. Thanks in advance.</p>