CSS - 滚动一个元素，并使另一个元素可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2776109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Rollover one element, and make another element visible
提问by Kyle
In CSS, is it possible that when I rollover one element, I make another element visible? I have an icon, and when someone mouses over it, I want it to make visible a text element that describes what the icon does.
在 CSS 中，当我滚动一个元素时，是否有可能使另一个元素可见？我有一个图标，当有人将鼠标悬停在它上面时，我希望它显示一个描述图标功能的文本元素。
回答by Kyle
Here's a CSS only tooltip I use all the time :) Works great, even in IE.
这是我一直使用的仅 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>
Hope it helps.
希望能帮助到你。
回答by David says reinstate Monica
You can make child-elements visible by hovering on the parent (as Hunter suggests), or siblings:
您可以通过将鼠标悬停在父级（如Hunter 建议）或兄弟级上来使子元素可见：
span:hover + span {display: block; }
There are maybe some slight cross-browser compatibility issues, but with a valid doctype I think IE7+ is okay with sibling selectors (though I've not tried to test that theory).
可能存在一些轻微的跨浏览器兼容性问题，但是对于有效的文档类型，我认为 IE7+ 可以使用同级选择器（尽管我没有尝试测试该理论）。
回答by hunter
sure it is!
就是这样！
.me:hover span { display: block; }
If you want to show an element that isn't a child of the element hovered you might need to use javascript
如果要显示不是悬停元素的子元素的元素，则可能需要使用 javascript
回答by JC Ford
Here's a little slapped-together example that won't work on IE...
这是一个在 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>
But you really should just use jQuery.
但你真的应该只使用 jQuery。
回答by Steven Dorfmeister
Agree with the JavaScript recommendation. Specifically jQuery is easy and most appropriate for page behavior logic. I think CSS should only be look/feel/style...Javascript should be were all your event and behavior logic is.
同意 JavaScript 建议。特别是 jQuery 很简单，最适合页面行为逻辑。我认为 CSS 应该只是外观/感觉/风格...Javascript 应该是你所有的事件和行为逻辑。
