2

これはコードです：

HTML:

<img src="..." />

// other stuff 

<div id="image">
<a href="" > bla bla bla </a>
<a href="" > ble ble ble </a>
</div>

CSS:

#image a:hover{color:green;}

これ欲しい：

ユーザーがマウスを画像の上に置くと、div 内の id "image" を持つすべてのリンクが緑色になります (ユーザーがマウスをリンクの上に置いた場合のように)。

可能であれば、CSS のみでこれを行うことを好みます。

4

3 に答える 3

7 
img:hover + #image a {
    color: green;
    text-decoration: none;
}

http://jsfiddle.net/Tzpmd/

于 2013-05-01T16:42:30.313 に答える
3 
img:hover + #image a{color:green;}

:hoverwith の使用に関してはブラウザーの癖がいくつかあり+ますが、テストを行って、サポートされているブラウザーが影響を受けるかどうかを確認する必要があります。

もちろん+、古いブラウザではサポートされません。

間に要素がある場合は、~代わりに使用できます。

img:hover ~ #image a{color:green;}
于 2013-05-01T16:42:59.113 に答える
1

@xRobot、フィドルの問題は、の兄弟を参照していない#topimgことtableですtr#image。参照している要素は、table 要素の子であり、#topimg 要素の姪です (兄弟ではありません)。

この更新されたフィドルを確認してください: http://jsfiddle.net/QSy9H/32/

...そして、このページの例を使用して:

img:hover ~ table #image a{ color:green; }
于 2013-05-01T18:42:50.497 に答える