当我将鼠标悬停在另一个 div 上时，如何使文本出现在一个 div 中？

Posted

技术标签:

【中文标题】当我将鼠标悬停在另一个 div 上时，如何使文本出现在一个 div 中？【英文标题】：How do I make text appear in a div when I hover over another? 【发布时间】：2021-02-03 13:38:15 【问题描述】：

我已经为我的网站创建了一个主页，其中包含所有方面的概述。现在，只有带有超链接的图像，但是当您将鼠标悬停在图像上时，我想添加有关特定 div 中每个链接的额外信息。如果这样更容易，我可以使用 javascript。我只为#xchat 添加了一些文本，而不是为其余部分添加了尝试。这是 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>

这里是 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>

非常感谢任何帮助。提前致谢。

【问题讨论】：

欢迎来到 SO。帮自己一个忙 - 在 .js 文件中使用集中式 JavaScript。你的 HTML 现在真的很难用所有（重复的）内联 JS 阅读。 或 CSS，如果可能的话，用于悬停效果。 您可以访问此链接，它可能会有所帮助。 ***.com/questions/14263594/… 【参考方案1】：

你可以这样做：

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

当然，您可以为所有元素添加样式。

【讨论】：

【参考方案2】：

我希望这是你想要实现的目标

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

【讨论】：

以上是关于当我将鼠标悬停在另一个 div 上时，如何使文本出现在一个 div 中？的主要内容，如果未能解决你的问题，请参考以下文章

仅当我将鼠标悬停在其上时如何使图像出现

悬停在文本上时，悬停效果消失

当我将鼠标悬停在 div 上时，动画应该开始

在悬停时显示一个 DIV，但在另一个悬停的 DIV 内。使用 CSS

更改嵌套 div 内鼠标悬停时的图层颜色

在 HTML 中，如何在将鼠标悬停在文本上时显示图像？