CSS悬停互动问题

我有这样的HTML代码：CSS悬停互动问题

<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）

这是怎么回事？

来源

2012-07-21 yeaaaahhhh..hamf hamf

相邻选择器（+）仅选择与下一个选择器匹配的下一个相邻兄弟。见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; 
}

来源

2012-07-21 16:43:54 Matt

是什么使这两个兄弟互动的正确格式？ coffee：hover + .drink，+ food {} ?? – 2012-07-21 16:45:04

您可以在容器div中包装.drink和.food，然后将悬停规则应用于容器div的子项。 – Matt 2012-07-21 16:46:30

我想要做同样的事情，当我徘徊在饮料和食物。这会是一个问题，不是吗？ – 2012-07-21 16:50:46

不要使用相邻兄弟选择。使用general sibling one。那就是~而不是+。

+只针对紧跟X. ~目标先于X.

看看小提琴任何同级元素兄弟元素 - http://jsfiddle.net/joplomacedo/333v5/

来源

2012-07-21 17:15:33 banzomaikaka

好吧，我猜你是对的。我正在寻找那个通用的兄弟姐妹规则。不幸的是，它只适用于JSFIDDLE，但在我的HTML页面does not work.What可能是它的原因？ – 2012-07-21 18:17:32

为什么它可能不工作有很多原因。这可能是因为你可能认为他们不是兄弟姐妹。这可能是该规则不适用于缺乏特异性。你的网页是否在线 - 我可以看看它。 – banzomaikaka 2012-07-21 18:29:27

确定http://arvyla.comlu.com/menu.html 我错过了一些大事 – 2012-07-21 18:46:28

CSS悬停互动问题

回答

相关问题