[英]How can I make one <DIV> visible below a second <DIV> when I hover over the second <DIV>
In my code I have a main <div>
and a smaller one. 在我的代码中,我有一个主<div>
和一个较小的。 When I hover the main <div>
it goes down and the smaller one shows up. 当我将鼠标悬停在主<div>
它会下降,而较小的一个会出现。 But then the mouse ends up over the small <div>
, and the main <div>
comes back up. 但是,鼠标最终停在小的<div>
上方,而主<div>
再次出现。
Here a graphical representation: 这里是图形表示:
---------
| |
| main |
| div |
----------
After when hovering over the main <div>
: 将鼠标悬停在主<div>
:
-----
| sub|
| div|
-----
-----------
| main |
| div |
| |
----------
Here is my HTML code: 这是我的HTML代码:
<!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>
Ok, so css3 has siblings selector ~
, which can help to do this. 好的,因此css3具有同级选择器~
,这可以帮助实现这一点。
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/ jsfiddle: http : //jsfiddle.net/e7L44/1/
just beware of the browser supprot. 只是要注意浏览器的支持。 :) :)
Here is some details about it : http://reference.sitepoint.com/css/generalsiblingselector 以下是有关它的一些详细信息: http : //reference.sitepoint.com/css/generalsiblingselector
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.