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懸停互動問題

回答

相關問題