关键词：
【中文标题】当我将鼠标悬停在另一个 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>
【讨论】：
仅当我将鼠标悬停在其上时如何使图像出现
】仅当我将鼠标悬停在其上时如何使图像出现【英文标题】：HowtomakeimageappearonlywhenIhoveronit【发布时间】：2020-02-0810:31:23【问题描述】：我希望我的图像仅在我将鼠标悬停时出现，我尝试将它放在样式部分但它不起作用。这段代... 查看详情
悬停在文本上时，悬停效果消失
...7-10-2511:08:30【问题描述】：话题在说——我的问题如下：当我将鼠标悬停在我的图片上时，我希望有一个颜色叠加层图片上的文字应该在悬停前后都可见，没有任何变化问题：当我将鼠标悬停在文本上时，颜色悬停覆盖消失（当... 查看详情
当我使用 jquery 将鼠标悬停在图标上时如何显示一个简单的文本框
】当我使用jquery将鼠标悬停在图标上时如何显示一个简单的文本框【英文标题】：HowtoshowasimpletextboxwhenIhoveroveraniconusingjquery【发布时间】：2012-07-3116:08:19【问题描述】：我在html中有一个输入字段，该字段旁边有一个帮助图标(?)... 查看详情
当我将鼠标悬停在 div 上时，动画应该开始
】当我将鼠标悬停在div上时，动画应该开始【英文标题】：AnimationshouldstartwhenIhoveroverthediv【发布时间】：2022-01-0722:59:01【问题描述】：我想实现以下内容：动画应该只在我将鼠标悬停在div上时开始。将鼠标悬停在div上后，结束... 查看详情
仅使用 CSS，将鼠标悬停在另一个元素上时显示 div
】仅使用CSS，将鼠标悬停在另一个元素上时显示div【英文标题】：UsingonlyCSS,showdivonhoveroveranotherelement【发布时间】：2011-07-0918:19:36【问题描述】：当有人将鼠标悬停在<a>元素上时，我想显示一个div，但我想在CSS而不是J... 查看详情
在 HTML 中，如何在将鼠标悬停在文本上时显示图像？
...t?【发布时间】：2015-03-0418:50:10【问题描述】：在HTML中，当我将鼠标悬停在特定文本部分上时，如何使图像出现（或变得可见）？我正在编写一个HTML应用程序，以下是我的代码：.plank1position:static;left:80p 查看详情
当鼠标悬停在另一个 Div 上时为一个 Div 设置动画
】当鼠标悬停在另一个Div上时为一个Div设置动画【英文标题】：AnimateoneDivwhenthemousehoversoveranother【发布时间】：2012-01-1023:38:43【问题描述】：当鼠标悬停在页面其他地方的另一个div标签上时，我希望为一个div设置动画。举个例子... 查看详情
如何添加鼠标悬停摘要
...串，它说：类System.String将文本表示为一系列Unicode字符。当我将鼠标悬停在一个我的类上时，它会简单地说：类 查看详情
将鼠标悬停在 li 上时如何更改所有字体颜色
...间】：2014-01-0708:00:12【问题描述】：我试图做到这一点，当我将鼠标悬停在一个列表元素（它是一个矩形）上时，里面的所有文本都变成白色，背景变成橙色。我的问题是当您将鼠标悬停在li元素上时，“discProd”类中的文本不... 查看详情
当鼠标悬停在 DIV 上时，如何使某些控件可见并与 DIV 重叠？ [关闭]
】当鼠标悬停在DIV上时，如何使某些控件可见并与DIV重叠？[关闭]【英文标题】：HowtomakesomecontrolsvisibleandoverlappingaDIVwhenmousehoversonit?[closed]【发布时间】：2012-12-2007:22:20【问题描述】：我在CSS和JavaScript方面不是那么专业。我正在... 查看详情
为啥当我将鼠标悬停在正方形上时不透明度不起作用？
】为啥当我将鼠标悬停在正方形上时不透明度不起作用？【英文标题】：WhydoestheopacitynotworkwhenIhoveroverthesquare?为什么当我将鼠标悬停在正方形上时不透明度不起作用？【发布时间】：2021-10-2611:53:12【问题描述】：当我将鼠标悬停... 查看详情
将鼠标悬停在按钮上时如何更改 div 的文本？
】将鼠标悬停在按钮上时如何更改div的文本？【英文标题】：HowdoIchangethetextofadivwhenIhoveroverabutton?【发布时间】：2014-08-0717:01:06【问题描述】：我有什么：连续8个编号的框。我不允许使用jQuery。我想做的事：当用户将鼠标悬停在... 查看详情
更改嵌套 div 内鼠标悬停时的图层颜色
...以下html代码，我正在尝试更改div标签的背景颜色，这样当我将鼠标悬停在文本上时，背景应该变成灰色，但是当我将鼠标移出标签，它应该变成白色。我正在尝试使用css来做到这一点，但我很难想出代码。这可能只使用css吗？... 查看详情
当我将鼠标悬停在链接上时希望切换图像
】当我将鼠标悬停在链接上时希望切换图像【英文标题】：LookingtoswitchimagewhenIhoveroveralink【发布时间】：2021-03-0409:20:46【问题描述】：我一直在努力解决这个问题，我一直在寻找其他类似的问题，但还没有找到我的问题的答案。... 查看详情
在另一个 DOM 元素上调度鼠标滚轮事件
...滚动div之上，我绝对定位了与可滚动div的一半重叠的div。当我将鼠标光标放在可滚动的div上时，我可以用鼠标滚轮滚动它。但是当我将光标移到重叠的div上时，鼠标滚轮会停止滚动该div（这是正确的行为， 查看详情
仅使用 css 更改另一个 div 的样式
...在大陆上时，它会改变颜色。但是底部还有另一个列表，当我将鼠标悬停在另一个列表上时，我无法使其工作。html:<ulid 查看详情
在悬停时显示一个 DIV，但在另一个悬停的 DIV 内。使用 CSS
...：2013-12-2804:24:27【问题描述】：我正在尝试获取它，因此当我将鼠标悬停在一个DIV上时，另一个DIV将显示在该DIV内但显示在当前内容上。因此，如果我有一个500x500像素的DIV并显示书籍封面， 查看详情
将鼠标悬停在 X 上时，如何仅在单个列表中显示 X？
...whenIhoveronit?【发布时间】：2021-11-2315:51:28【问题描述】：当我将鼠标悬停在单个列表中时，我遇到了问题。当我悬停它时，我只想在一个列表上显示X。但是当我将鼠标悬停在一个时，它会一直显示。importReactfrom"react";importuseStatef... 查看详情