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

您可以通过将鼠标悬停在父级（Hunter suggests）或兄弟姐妹上来显示子元素：

span:hover + span {display: block; }

可能存在一些轻微的跨浏览器兼容性问题，但是使用有效的doctype我认为IE7 +对于兄弟选择器是可以的（尽管我没有试过测试该理论）。

Answer 3

确定是的！

.me:hover span { display: block; }

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

Answer 4

这里有一个简单的例子，不适用于IE ...

<html>
<head>
<style>
    div.tooltip
    {
        margin-top: 16px;
        margin-left: -1px;
        position: absolute;
        border: 1px solid black;
        background-color: blue;
        color: yellow;
        display: none;
    }
    div.icon
    {
        width: 16px;
        height: 16px;
        border: 1px solid blue;
        background-color: cyan;
    }
    div.icon:hover .tooltip
    {
        display: block;
    }
</style>
</head>
<body>
    <div class="icon">
        <div class="tooltip">This is what the icon does.</div>
    </div>
</body>
</html>

但你真的应该使用jQuery。

Answer 5

同意JavaScript推荐。具体来说，jQuery很容易，最适合页面行为逻辑。我认为CSS应该只是外观/感觉/风格...... Javascript应该是你的所有事件和行为逻辑。

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

5 个答案: