css悬停交互问题

时间:2012-07-21 16:41:33

标签: css css3 hover

我有这个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)

这里发生了什么?

2 个答案:

答案 0 :(得分:1)

请勿使用相邻的兄弟选择器。使用general sibling one。那是~而不是+

+仅定位紧跟X后面的兄弟元素。~定位X之前的任何兄弟元素。

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

答案 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;
}​​​​