将鼠标悬停在不同元素上时，如何在 span 标签内显示文本？答案

【问题标题】：How would I show text inside a span tag when hovering over a different element?将鼠标悬停在不同元素上时，如何在 span 标签内显示文本？
【发布时间】：2014-07-21 05:03:17
【问题描述】：

我有一个网页设置，该网页在表格等网格中具有多个 DIV 标签。我想知道在将鼠标悬停在 DIV 或 IMG 或 A 标签上时是否可以使用 CSS 来显示文本。我可以使用这 3 个中的任何一个来实现它，因为我的一个 DIV 标签只包含 IMG，它也是指向新页面的超链接。我页面中的一个行的示例设置如下：

    <div class="Home-06">
    <a href="image1link.html">
    <img src="images/image1.jpg" width="250" height="250" alt="" 
        style="border-width: 0px"></a>
</div>
<div class="Home-07">
    <span>Text for Image 1</span><span>Text for Image 2</span>
</div>
<div class="Home-08">
    <a href="image2link.html">
    <img src="images/image2.jpg" width="250" height="250" alt="" 
        style="border-width: 0px"></a>
</div>

当悬停在“Home-06”和“Home-08”上时，我想让带有跨度标签的中间 DIV“Home-07”显示不同的文本。

我的 CSS：

div.Home-06 {
position:absolute;
left:102px;
top:450px;
width:250px;
height:250px;
}
div.Home-07 {
position:absolute;
left:352px;
top:450px;
width:320px;
height:250px;
background-color:#000000;
}
div.Home-08 {
position:absolute;
left:672px;
top:450px;
width:250px;
height:250px;
}

【问题讨论】：

请阅读如何使用 Markdown 进行发布。 HTML 代码会更清晰易读。
编写实际的 HTML。突出显示它。然后按 CTRL+k
我粘贴了我的 html 页面示例。对不起。

标签： css hover html

【解决方案1】：

使用 JQuery，悬停：http://api.jquery.com/hover/ 查找演示。

【讨论】：

“我想知道当鼠标悬停在 DIV 或 IMG 或 A 标签上时是否可以使用 CSS 来显示文本。”
我不认为 CSS 是 正确的方法。他会在某个时候卡住，并用属于 DOM 操作的逻辑污染他的 CSS。
此外，如果没有 flexbox/absolute 定位，这是不可能的（因为 .image2 出现在跨度元素之后。
我的 DIV 实际显示的是绝对位置。它们位于一个大 DIV 中，将它们全部集中在我的页面中。

【解决方案2】：

最简单的方法是跨度包含在您悬停的元素中，例如：

<div class="alwaysshowme">
    <p>
        I can always be seen [hover over me!]
        <span class="showmeonhover"><br />I can only be seen on hover...</span>
    </p>
</div>

那么 CSS 将是：

.showmeonhover { display: none; }
.alwaysshowme:hover .showmeonhover {
    display: inline;
}

这是一个小提琴：http://jsfiddle.net/Niffler/d2kYq/

【讨论】：

好招！ ...但不是非常模块化。我仍然会使用 JQuery。
也许我可以修改该部分中的 3 个 div 并将它们全部放入一个大 div 中。你的方式可以使用两种不同的悬停元素吗？将鼠标悬停在 div 的左侧，在中上部显示文本，而将鼠标悬停在 div 的右侧，在 div 的底部中心显示替代文本。
@Niffler 选项 2 非常酷。我想我会努力让这对我有用。