Question

我有一个网页设置，在网格中有多个DIV标签，如表格。我想知道当鼠标悬停在DIV或IMG或A标签上时，使用CSS显示文本是否可行。我可以使用其中任何一个来实现它，因为我的一个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>

我想制作中间DIV＆＃34; Home-07＆＃34;当我的跨度标签悬停在＆＃34; Home-06＆＃34;和＆＃34; Home-08＆＃34;。

我的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;
}

Answer 1

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

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

Answer 2

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

将鼠标悬停在其他元素上时，如何在span标记内显示文本？

2 个答案: