[英]CSS: How do I hover over one element, and show another?
I have a navigation panel, and when you hover over the fixtures <div>
, it displays the first 5 or so fixtures in a panel that drops down from the main navigation panel. 我有一个导航面板,当您将鼠标悬停在灯具<div>
,它会显示从主导航面板下拉的面板中的前5个左右灯具。
Im trying to achieve this using CSS with :hover
. 我试图用CSS实现这个:hover
。 This is an example of the :hover
im trying to get: http://jsfiddle.net/EajKf/189/ 这是一个例子:hover
我试图得到: http : //jsfiddle.net/EajKf/189/
HTML: 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: 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;
}
Thanks for any answers! 谢谢你的回答!
Did you mean this? 你的意思是?
http://jsfiddle.net/EajKf/190/ http://jsfiddle.net/EajKf/190/
html: 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: 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;
}
EDIT: 编辑:
it still doesn't work as you want... you have to make <li class="hidden">
child of <li class="fixtures">
它仍然无法正常工作......你必须使<li class="hidden">
<li class="fixtures">
孩子
you can do this by using the css 'inherit' value. 你可以使用css' inherit'值来做到这一点。 check out this post and the demos within: http://joshnh.com/2012/10/25/dont-forget-the-css-value-inherit/ 看看这篇文章和演示内容: http : //joshnh.com/2012/10/25/dont-forget-the-css-value-inherit/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.