CSS - 翻转一个元素,并使另一个元素可见

Question

在CSS中,当我翻转一个元素时,是否可能使另一个元素可见？我有一个图标,当有人将鼠标悬停在它上面时,我希望它能够显示一个描述图标功能的文本元素.

Answer 1

这是我一直使用的CSS唯一工具提示:)工作得很好,即使在IE中也是如此.

a:hover {
background:#ffffff; 
text-decoration:none;
} 
/*BG color is a must for IE6*/

a.tooltip span {
display:none; 
padding:2px 3px; 
margin-left:8px; 
width:130px;
}

a.tooltip:hover span{
display:inline; 
position:absolute; 
background:#ffffff; 
border:1px solid #cccccc; 
color:#6c6c6c;
}

Easy 

<a class="tooltip" href="#">
Tooltip
<span>T his is the crazy little Easy Tooltip Text.
</span>
</a>

希望能帮助到你.

Answer 2

您可以通过将鼠标悬停在父级(如亨特建议)或兄弟姐妹中来显示子元素:

span:hover + span {display: block; }

可能有一些轻微的跨浏览器兼容性问题,但有了一个有效的doctype,我认为IE7 +对于兄弟选择器是可以的(尽管我没有试过测试该理论).

Answer 3

就是这样！

.me:hover span { display: block; }

如果你想显示一个不是悬停元素子元素的元素，你可能需要使用 javascript