How can I make one <DIV> visible below a second <DIV> when I hover over the second <DIV>
Question
In my code I have a main <div> and a smaller one. When I hover the main <div> it goes down and the smaller one shows up. But then the mouse ends up over the small <div> , and the main <div> comes back up.
Here a graphical representation:
---------
| |
| main |
| div |
----------
After when hovering over the main <div> :
-----
| sub|
| div|
-----
-----------
| main |
| div |
| |
----------
Here is my HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#Target
{
background-color: red;
opacity:.1;
margin:20px;
padding:0;
float:left;
z-index:1;
position:absolute;
}
#Hovered
{
background-color:#0F0;
z-index:0;
float:left;
width:330;
opacity:1;
height:200px;
background-image:url(phpcenter/logo.PNG);
background-repeat:no-repeat;
transition:all 1s;
z-index:2;
width:330px;
opacity:.1;
}
#Hovered:hover
{
background-position:0 500%;
}
#Target:hover, #Hovered:hover + #Target
{
opacity:1;
transition:1s;
}
</style>
</head>
<body>
<div id="Hovered">Hover me</div>
<div id="Target"><a href="#">about me</a><br><a href="#">resume</a></div>
</body>
</html>
1 answers
solution1
0 2014-01-15 13:44:36
Ok, so css3 has siblings selector ~ , which can help to do this.
Try this:
#Hovered{background-color:#0F0; height:80px; width:330px; width:330px; z-index:0;}
#Target{background-color:red; margin:20px; opacity:.1; padding:0; transition:all 1s; position:absolute; top:15px; width:290px; z-index:1}
#Hovered:hover ~ #Target{opacity:1; }
jsfiddle: http://jsfiddle.net/e7L44/1/
just beware of the browser supprot. :)
Here is some details about it : http://reference.sitepoint.com/css/generalsiblingselector
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.