1

我有这个 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我的问题是，当我将鼠标悬停在上面时，只有's 的不透明度会改变，coffee我不知道为什么food不改变。

（我对所有班级都做了同样的事情，这就是发生的事情：
Coffee:hover- 喝新的不透明度；食物 NADA
Drink:hover- 咖啡 NADA；食物新的不透明度
Food:hover- 喝 NADA；咖啡 NADA）

这里发生了什么？

4

2 回答 2

1

不要使用相邻的兄弟选择器。使用一般的兄弟姐妹之一。那~不是+.

+仅针对紧跟 X 的兄弟元素。~针对 X 之前的任何兄弟元素。

看看小提琴 - http://jsfiddle.net/joplomacedo/333v5/

于 2012-07-21T17:15:33.957 回答
0

相邻选择器 ( +) 仅选择与下一个选择器匹配的下一个相邻兄弟。请参阅http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors。

由于 .drink 将 .coffee 和 .food 分开，因此悬停规则不适用于 .food。

修复-请参阅此小提琴以获取工作示例

/* 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;
}​​​​
于 2012-07-21T16:43:54.720 回答