1

div内に2つの画像があります。ユーザーが2番目の画像にカーソルを合わせると、最初の画像の不透明度は40％になります。img.first問題は、ホバーされているときに選択できないことimg.secondです。一般的な兄弟セレクターを調べてみましたが、最初のセレクターの後に続く要素しか選択されていないようです。

これはjQueryで実行できることは知っていますが、純粋なCSSソリューションがあるかどうか疑問に思っていますか？

<div>
  <img class="first" src="#">
  <img class="second" src="#">
</div>

div > img.second:hover ~ img.first { opacity:0.4; filter:alpha(opacity=40); } //failed
4

4 に答える 4

4

一般的な兄弟セレクターを調べてみましたが、最初のセレクターの後に続く要素しか選択されていないようです。

それは正しいです。そのため、純粋なCSSセレクターでは、これは不可能です。

ただし、レイアウトによっては、div:hoverやなどのセレクターで複数のルールを使用しimg:hoverたり、不透明度の値を操作したりして、目的の結果を得ることができる場合があります。例については、他の回答を参照してください。しかし、より確実なソリューションが必要な場合は、jQueryを使用したほうがよいでしょう。

于 2012-12-21T17:39:22.377 に答える
2

次のようなものを試してください：

div:hover .img {
  opacity: 0.4;
}

div .img:hover {
  opacity: 1;
}

.img {
  display: inline-block;
  background: green;
  width: 100px;
  height: 40px;
}

デモ： http： //jsbin.com/idowoz/2/

于 2012-12-21T17:39:51.947 に答える
0

このcssを試してください：

div:hover img{
    opacity:0.5            
}
div:hover img:hover{
     opacity:1           
}

テスト： http： //jsfiddle.net/WpCtL/2/

于 2012-12-21T17:42:34.753 に答える
0

これが起こっているように見せるためのトリックを行うことができます：http：//jsfiddle.net/cwxCX/3/

<div>    
    <img src="http://placekitten.com/200/200">
    <img src="http://placekitten.com/300/300">
    <img src="http://placekitten.com/400/400">
    <img src="http://placekitten.com/500/500">
</div>

CSS

div{
    float:left;
}
img{
    width:100px;
    height:100px;
}
div img{
    float:right;
}

div img:hover ~ img{
    opacity:.4;
}
于 2012-12-21T17:48:22.397 に答える