0

私のサイトにdivは、削除オプション（基本的にはリンク）があるセットがあります。私が欲しいのは、削除オプション（デフォルトでは非表示）を、マウスがdivに入るときに表示され、divから出るときに非表示にすることです。また、divに子があり、マウスがその子の1つにある場合、コンテナと子の両方に削除オプションが表示されている必要があります。

HTMLは次のとおりです。

<div class="container">
    <a href=".." class="deleteOption">Delete</a>
    <div class="child">
        <a href=".." class="deleteOption">Delete</a>
    </div>
    <div class="child">
        <a href=".." class="deleteOption">Delete</a>
    </div>
    .
    .
    .
    <div class="child">
        <a href=".." class="deleteOption">Delete</a>
    </div>
</div>

これが私が思いついたJavaScriptです：

$('div.container').mouseenter(function () {
    $(this).find('a.deleteOption').show();
    $(this).find('div.child').find('a.deleteOption').hide();
});

$('div.container').mouseleave(function () {
    $(this).find('a.deleteOption').hide();
});

$('div.child').mouseenter(function () {
    $(this).find('a.deleteOption').show();
    $(this).parent.find('a.deleteOption').hide();
});

$('div.child').mouseleave(function () {
    $(this).find('a.deleteOption').hide();
});

これはChromeとFirefoxで正常に機能しますが、IEでは（IE 9でも）削除オプションが断続的に表示および非表示になります。すべてのブラウザでjQueryを使用してこれを行うためのより良い方法はありますか？

4

1 に答える 1

3

あなたは純粋なcssでこれを達成することができます：

.container .deleteOption { display:none; }
.container:hover > .deleteOption { display:inline; }
.child:hover > .deleteOption { display:inline; }
于 2012-05-21T07:16:04.697 に答える