4

一連の「タイル」div を持つページがあり、それぞれに 1 つ以上の子 div があります。

親divをロールオーバーするときに、そのクラスとすべてのdivをホバー状態に変更したい。

親divを簡単に機能させることができますが、子を取得できません: Fiddleを参照してください

$('.tile').hover(
            function () {
                $(this).addClass("hover");
                $(this).find('.inner').addClass("hover");
              },
              function () {
                $(this).removeClass("hover");
                $(this).find('.inner').removeClass("hover");
              }
        )

「検索」を使用して私が目にするすべての例では、NAMED の親を使用しています。ただし、現在の親がホバーされている方 ($this) の子を使用する必要があります。

編集/更新:

私の問題の一部は、div 内に画像ボタンがあることです。そのボタンには独自のロールオーバーがあるはずです。以下のデザイナーからの画像を参照してください。最初の組み合わせを取得できます-すべてがシアンと白のプラスボタン...しかし、CSSを使用すると、lusボタンのPARENTSに影響を与えることができませんか?

ここに画像の説明を入力

4

3 に答える 3

6

これをスクリプト化する代わりに、CSS 疑似クラス :hover を使用してみてください:

    .tile {
        width: 200px;
        height: 300px;
        background-color: yellow;
        margin: 20px;
    }
    .tile:hover {
        background-color: lightblue;
    }
    .inner {
        width: 200px;
        height: 50px;
        background-color: goldenrod;
    }

    .tile:hover .inner{
        background-color:#369;
    }

    .tile:hover button{
        color:#ff0000;
    }
    .tile:hover button:hover{
        color:#00ff00;
    }

台本なし、心配ありません:)

フィドル: http://jsfiddle.net/67tCr/

于 2012-11-09T14:42:42.707 に答える
3

あなたのコードは問題ありません... CSS ルールの順序を変更するだけです:

.tile {
    width: 200px;
    height: 300px;
    background-color: yellow;
    margin: 20px;
}

.inner {
    width: 200px;
    height: 50px;
    background-color: goldenrod;
}

.hover {
    background-color: lightblue;
}

更新されたフィドル

または、より具体的にすることができます

.hover, .inner.hover {
  background-color: lightblue;
}
于 2012-11-09T14:39:07.940 に答える
0

私は「子」機能を使用します：

$(".title").hover(function(){
  $(this).addClass("hover");
  $(this).children(".inner").addClass("hover");
},function(){
  $(this).removeClass("hover");
  $(this).children(".inner").removeClass("hover");
});

これがフィドルです： http://jsfiddle.net/ckaufman/qXU7R/1/

于 2012-11-09T14:42:10.367 に答える