[英]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.