我有这个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
- NADA咖啡;食物新的不透明度
Food:hover
- 喝NADA;咖啡NADA)
这里发生了什么?
答案 0 :(得分:1)
请勿使用相邻的兄弟选择器。使用general sibling one。那是~
而不是+
。
+
仅定位紧跟X后面的兄弟元素。~
定位X之前的任何兄弟元素。
答案 1 :(得分:0)
相邻选择器(+
)仅选择与下一个选择器匹配的下一个相邻兄弟。请参阅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;
}