5

簡単な例で私の問題を示してみます。

私は何を持っていますか？
http://jsfiddle.net/JGzSh/3/
これは簡単なボタンで、後で onlick イベントが発生します。緑の div (親) にカーソルを合わせると:hover、色が少し変化します。

どうしたの？
問題は、黄色の部分にカーソルを合わせると、黄色の要素の背景を変更したいのですが、親として機能させたくないということです:hover。

質問では、子の上にカーソルを置いたときに
親を無効にするにはどうすればよいですか? :hover(つまり、親の背景は最初の色に戻りますか?)

これらは、これまでのホバリングに関するCSSルールのみです

.przycisk:hover{
    background-color: #383;
}
.skrot:hover{
    background-color: red;
}

これまでに何を試しましたか？
それは最も重要な質問です、私は知っています。私はいくつかの調査を行いましたが、これまでのところ私を助けることができるいくつかの解決策を見つけましたが、それらはすべてjQueryを使用しています.

Google で見つかった jQuery のソリューションの例:

$('.przycisk').hover(function(e){
    if($(e.target).is('.skrot')){
        // your child span is being hovered over
        e.stopPropagation();
    }else if($(e.target).is('.przycisk')){
        // your parent element is being hovered over
    }
});
4

1 に答える 1

1

私はそのためのかなり迅速な解決策を見つけたと思います。

$('.deHover').hover(function(){
    $(this).parent().css('background-color', '#008000');
}, function(){
    $(this).parent().css('background-color', '#383');
});

$('.przycisk').hover(function(){
    $(this).css('background-color', '#383');
}, function(){
    $(this).css('background-color', '#008000');
});

親ホバーを無効にしたいすべてのものに、deHoverクラスを追加します。これにより、mousein/mouseoutの親の背景色が変更されます。ただし、親のホバー（インとアウト）を機能させることも忘れないでください。そのため、jQueryも追加しました。

これが動作するかどうかを確認するためのjsfiddleです。不満を言うものは何も見つかりませんでした。

于 2013-02-26T20:30:20.490 に答える