css悬停交互问题
css悬停交互问题
提问于 2012-07-22 00:41:33
我有这个html代码：
<div id="main">
<section id="content">
<div id="catalogue">
<div class="coffee"><a href="coffees.html"><img src="img/kafesmenu.jpg"alt="coffees" width="250" height="300"></a></div>
<div class="drink"> <a href="drink.html"><img src="img/potomenu.jpg" alt="drinks" width="250" height="300"></a> </div>
<div class="food"> <a href="food.html"><img src="img/faimenu.jpg" width="250" height="300" alt="food"></a> </div>
</div>
</section>
</div>我想将鼠标悬停在coffee上并更改drinks/food的不透明度。这应该通过使用css规则.coffee :hover + .drink{...}来完成。这是我的css：
#catalogue .coffee{
position: absolute;
width: 250px;
height:300px;
background-color: #1C0903;
}
#catalogue .drink {
position: absolute;
width: 250px;
left: 260px;
background-color: #1C0903;
}
#catalogue .food {
position: absolute;
width: 250px;
left: 520px;
background-color: #1C0903;
}
#catalogue .coffee:hover {
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform: translateY(-10%);
}
#catalogue .coffee:hover + .drink{
opacity:0.5;
}
#catalogue .coffee:hover + .food {
opacity:0.5;
}我的问题是，当我将鼠标悬停在drink上时，只有coffee的不透明度会改变，我不知道为什么food不会改变。
(我对所有类都做了同样的事情，结果如下：
Coffee:hover -饮料新不透明；食品NADA
Drink:hover - Coffee NADA；食品新不透明
Food:hover --喝咖啡( NADA)
这里发生什么事情？
回答 2
Stack Overflow用户
发布于 2012-07-22 01:15:34
不要使用相邻的同级选择器。使用general sibling one。那就是~而不是+。
+只针对紧跟在X之后的同级元素。~针对任何在X之前的同级元素。
看看小提琴- http://jsfiddle.net/joplomacedo/333v5/
Stack Overflow用户
发布于 2012-07-22 00:43:55
相邻选择器(+)仅选择与下一个选择器匹配的下一个相邻同级。参见http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors。
由于.drink将.coffee和.food分开，因此悬停规则不适用于.food。
修复- See this fiddle for working example
/* Make all the children translucent first ... */
#catalogue:hover div {
opacity:0.5;
}
/* ... then make the currently-hovered div opaque and transform it */
#catalogue div:hover {
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform: translateY(-10%);
opacity: 1;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11594008
复制相关文章
相似问题
腾讯云开发者
