0

ホバー時に最上層の要素を選択する方法はありますか?

たとえば、2 つの div があるとします。最初のレイヤーでは、一番上のレイヤーは span.myText1 になりますが、スパンから離れても div にとどまると、div が一番上のレイヤーになります。

同様の例が 2 番目の div にも当てはまりますが、それにはより多くのレイヤーがあります。

.addClass('outline ') を最上位レイヤーのみにしたいと思います。

CSS 

.outline {
    outline: 5px solid #66ff66;
}

HTML

<div class="divs">
    <span class="myText1">some text</span>    
</div>

<div class="myDiv2">
    <div style="width:300px">   
       <span class="myText2">some text <button value="myButton"></span>
    </div>
</div>

.hover() が進むべき道だと思いますが、方法がわかりません。

$(myTopLayer).hover(
    function() {
        $(this).addClass('outline');                
    },
    function () {
        $(this).removeClass('outline');
    }
);
4

1 に答える 1

1

更新 - あなたの質問を誤解しました。私の以前の答えは、あなたが望んでいたこととは反対のことをしていました!

ホバーインすると、現在の要素にクラスを追加し、そのすべての親から削除し、ホバーアウトすると、要素からクラスを削除し、次を使用して直接の親 div に追加しますfirst()

コードは一般的なdivとを使用していることに注意してください。これがすべてのページでspan発生しないように、特定のものを使用することをお勧めします。divspan

デモを見る

$(function () {
    $("div,span").hover(

    function (e) {
        $(this).addClass('outline').parents().removeClass('outline');
        e.stopPropagation();
    },

    function (e) {
        $(this).removeClass('outline').parents("div").first().addClass('outline');
    });
});

前の回答 -

関数では、スタイルを適用する前に、親 div があるかどうかを確認してください。親 DIV が存在する場合は、最後の親 (一番上) にスタイルを追加します。それ以外の場合は、現在の要素にスタイルを適用します。

$("div").hover(...)セレクターを特定の親 DIV プロパティに変更したい場合があります。

デモを見る

$(function () {
    $("div").hover(

    function () {
        if ($(this).parents("div").size() > 0) {
            $(this).parents("div").last().addClass('outline');
        } else {
            $(this).addClass('outline');
        }
    },

    function () {

        if ($(this).parents("div").size() > 0) {
            $(this).parents("div").last().removeClass('outline');
        } else {
            $(this).removeClass('outline');
        }

    });


});
于 2013-09-04T04:43:08.527 に答える