0

場合によっては、DOM 要素の階層を変更できません。3 つのスパン (ボタン左、ボタン コンテンツ、ボタン右) に基づいて、ボタンがある状況に直面しています。

<span class="button-left"></span>
<span class="button-content">My button</span>
<span class="button-right"></span>

がアクティベートされたら、 と もアクティベートし.button-content:hoverたいです。これは純粋にCSSで行うことができますか? jQuery を使用して実行できることはわかっていますが、この場合は CSS のみのソリューションを探しています。.button-left:hover.button-right:hover

4

3 に答える 3

1

これは、すべての要素がこのような純粋なcssを介してホバー要素の後にある場合に実行できます

.button-content:hover, .button-content:hover + .button-right{background: red;}

デモ

しかし、css で前の要素を選択することはできません。

すべてのスパンを div でラップできれば、このように簡単にできます

div:hover > span{background: red;}

デモ

于 2013-08-15T08:03:29.463 に答える
0

親リンクのホバー アクションをターゲットにして、それに基づいて何かを行うことはできますか?

<a class="button">
    <span class="button-left">one</span>
    <span class="button-content">My button</span>
    <span class="button-right">three</span>
</a>

a.button:hover .button-left    { background-color: red; }
a.button:hover .button-content { background-color: red; }
a.button:hover .button-right   { background-color: red; }

デモ: http://jsfiddle.net/Xp5e8/

于 2013-08-15T08:11:04.137 に答える