[英]CSS: How do I hover over one element, and show another?
我有一个导航面板,当您将鼠标悬停在灯具<div>
,它会显示从主导航面板下拉的面板中的前5个左右灯具。
我试图用CSS实现这个:hover
。 这是一个例子:hover
我试图得到: http : //jsfiddle.net/EajKf/189/
HTML:
<div id="nav">
<ul id="menu">
<li><a class="home" href="#">Home</a></li>
<li><a class="fixtures" href="#">Fixtures</a></li>
<li><a class="hidden" href="#">Manchester City</a></li>
</ul>
</div>
CSS:
#nav li a.fixtures:hover{
color: #000;
margin-top:1px;
-webkit-transition-duration: 0.4s;
cursor: pointer;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
box-shadow: 0px 0px 20px rgba(0,235,255,0.8);
-webkit-box-shadow: 0px 0px 20px rgba(255,102,51,0.8);
background: rgba(255,102,51,0.8);
opacity: 50%;
}
#nav li a.hidden{
margin-top: 50px;
padding: 100px;
background-color: #fff;
display: none;
}
#nav li a.fixtures:hover #nav li a.hidden{
display: block;
}
谢谢你的回答!
你的意思是?
http://jsfiddle.net/EajKf/190/
HTML:
<div id="nav">
<ul id="menu">
<li class="home"><a href="#">Home</a></li>
<li class="fixtures"><a href="#">Fixtures</a></li>
<li class="hidden"><a href="#">Manchester City</a></li>
</ul>
</div>
CSS:
#nav li.fixtures:hover{
color: #000;
margin-top:1px;
-webkit-transition-duration: 0.4s;
cursor: pointer;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
box-shadow: 0px 0px 20px rgba(0,235,255,0.8);
-webkit-box-shadow: 0px 0px 20px rgba(255,102,51,0.8);
background: rgba(255,102,51,0.8);
opacity: 50%;
}
li.hidden{
margin-top: 50px;
padding: 100px;
background-color: #fff;
display: none;
}
li.fixtures:hover + li.hidden{
display: block;
}
编辑:
它仍然无法正常工作......你必须使<li class="hidden">
<li class="fixtures">
孩子
你可以使用css' inherit'值来做到这一点。 看看这篇文章和演示内容: http : //joshnh.com/2012/10/25/dont-forget-the-css-value-inherit/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.