CSS - Rollover one element, and make another element visible
In CSS, is it possible that when I rollover one eleme开发者_JAVA百科nt, 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.
Here's a CSS only tooltip I use all the time :) Works great, even in 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.
You can make child-elements visible by hovering on the parent (as Hunter suggests), or siblings:
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).
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
Here's a little slapped-together example that won't work on 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.
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.
加载中,请稍侯......
精彩评论