2

OK、次のような同様の構造があるとしましょう:

<div comp-id='one'>
    <div comp-id='two'>
         <div comp-id='three'>
         ...
         </div>
    </div>
</div>

私がやりたいことは、ホバー効果を子 (この場合は を持つものcomp-id="three") に適用することだけです。

重要な注意:明確 にターゲティングするつもりはありません[comp-id="three"]。どんな子でも、どんなcomp-id価値観でもターゲットにしたい。実際の例では、ネストされた[comp-id]edが無限に存在する可能性がありますdiv。私はただ最も内側の子供が必要です。

私が達成しようとしていること:

  • ユーザーが にカーソルを合わせるとthree、ハイライト表示されます three(oneおよび ではありませんtwo) 。
  • ユーザーが にカーソルを合わせるとtwo、強調表示されます two(not one- そしてもちろん、 not three)

私の現在のCSSコード:

[comp-id]:hover {
    box-shadow: inset 0 0 0 2px red;
    -webkit-box-shadow: inset 0 0 0 2px red;
    -moz-box-shadow: inset 0 0 0 2px red;
    -o-box-shadow: inset 0 0 0 2px red;
}

ただし、現在の CSS は、私が望んでいないものをすべて強調表示します。JavaScriptベースのソリューションを考えることができました。CSSはどうですか？

警告:私は CSS の専門家ではないので、これは非常に単純かもしれません... :-)

4

4 に答える 4

2

そして...まあ... @BMHのおかげで、これがうまくいきました：

$('[comp-id]:not(.hover)').mousemove(function(e){
    $('[comp-id]').removeClass('hover');
    e.stopPropagation();
    $(this).addClass('hover');

});
于 2013-08-23T07:36:50.860 に答える
1

これは jQuery ソリューションです。

$('[comp-id]').mousemove(function(e){
    $(this).removeClass('hover');
    $(e.target).addClass('hover'); 
}).mouseleave(function(e){
    $(this).removeClass('hover');
});

http://jsfiddle.net/sMRMz/4/

于 2013-08-23T06:56:32.377 に答える
0

これには「>」子セレクターを使用して、カスケードスタイルを停止できます

[comp-id]:hover {
    box-shadow: inset 0 0 0 2px red;
    -webkit-box-shadow: inset 0 0 0 2px red;
   -moz-box-shadow: inset 0 0 0 2px red;
    -o-box-shadow: inset 0 0 0 2px red;
}

[comp-id]:hover > *{
  box-shadow: none;
    -webkit-box-shadow: none;
   -moz-box-shadow: none;
    -o-box-shadow: none;
}
于 2013-08-23T06:59:57.297 に答える