堆栈内存溢出
  简体   繁体   English

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

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

 原文  2020-10-20 17:04:35  1   2    javascript/ html/ css

问题描述

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.现在，只有带有超链接的图像，但是当您将鼠标悬停在图像上时，我想添加有关特定 div 中每个链接的额外信息。 I am okay with using JavaScript if it is easier that way.如果这样更容易，我可以使用 JavaScript。 I have only added some text for #xchat, and not for the rest, to try it out.我只为#xchat 添加了一些文本，而没有为其余的添加一些文本来尝试一下。 Here is the CSS:这是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这是 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.提前致谢。

2 个解决方案

解决方案1
 1 已采纳  2020-10-20 17:25:33

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.当然，您可以为所有元素添加样式。

解决方案2
 1  2020-10-20 17:33:57

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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将鼠标悬停在另一个div的按钮上时，如何更改div的背景？ - how do i change a div background when you hover over a button in another div? 如何让文本出现在 div 上 - How do I get text to appear over a div 如何在 div img 上使用文本 hover？ - How do I hover with text over div img? 当我将鼠标悬停在文本上时，它会改变颜色并且颜色保持不变，我该如何做到这一点？ - How do I make it so when I hover over my text it changes color and the color stays changed? 将鼠标悬停在文本上时如何制作文本？ - How do I make text text when you hover the mouse over it? 如何在数据点上制作文本 hover？ - How do I make the text hover over a data point? 如何创建链接，以便每当我将鼠标悬停在链接上时，鼠标指针右侧会出现DIV（带文本）？ - How do i make a link so that whenever i hover over the link, a DIV (with text) appears to the right of the mouse pointer? 鼠标悬停时如何更改段落文本？ - How do I change a paragraph text when mouse hover over? 如何将鼠标悬停在菜单按钮上，然后出现选择项？ - How do I hover over the menu button and the selections appear? 如何在单击时使：hover保持div处于悬停状态？ - How do I make a div with :hover stay in hover state on click?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM