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ホバーしたときに の不透明度だけが変更され、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 に答える