CSS - Rollover one element, and make another element visible_问答_开发者

CSS - Rollover one element, and make another element visible

开发者 https://www.devze.com 2022-12-29 20:52 出处：网络

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 de

相关专题：css

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.