0

HTML1 つのページに、以下の要素が複数あります

<a href='#' class='note-links'>
    <div class='notes'>
        <div class='course_title'><b>{$course_title}</b></div>
        <img src='images/download_file.jpg' class='file' />
        <div class='course_code'>{$course_code}</div>
        <div class='level'>{$course_level} Level</div>
        <div class='price' class='notice'>₦ {$price}</div>
        <div class='opt'><br />
            <a href='' class='edit' id='{$id}'>Edit</a>&nbsp;.
            <a href='' class='delete' id='{$id}'>Delete</a>
        </div>
    </div>
</a>

divとclass optが隠されています。アンカータグをホバーすると、ホバーされたアンカータグのみに非表示のdivが表示されるようになります。以下のjQueryコードを使用しました

$('#menu-display').on('hover', '.note-links', function() {
    $(this).find('.opt').css('visibility', 'visible');
});

アンカー タグにカーソルを合わせると、何も表示されません。ただし、を削除する.find()と、非div表示が表示されますが、他のすべてのアンカー タグはホバーされません。

なぜこれが起こるのですか?どうすれば修正できますか?

4

3 に答える 3

4

CSS

.opt {visibility : hidden}

#menu-display .note-links:hover .opt  {visibility : visible}

これにはjQueryは必要ありませんが、アンカーを別のアンカーでラップすることはできませんか?

于 2013-05-22T23:32:03.120 に答える
3

hoverメソッドでイベントを使用することはできませんon:

jQuery 1.8 で非推奨、1.9 で削除: 「hover」という名前は文字列の短縮形として使用されます"mouseenter mouseleave"。これらの 2 つのイベントに対して 1 つのイベント ハンドラーをアタッチし、ハンドラーevent.typeはイベントが か かどうかをmouseenter調べる必要がありmouseleaveます。「ホバー」疑似イベント名を、.hover()1 つまたは 2 つの関数を受け入れるメソッドと混同しないでください。

$('#menu-display').on({
    mouseenter: function() {
        $(this).find('.opt').css('visibility', 'visible');
    },
    mouseleave: function() {
        $(this).find('.opt').css('visibility', 'hidden');
    }
}, '.note-links');
于 2013-05-22T23:34:20.127 に答える
0

多分これが役立つでしょう

$('#menu-display > .note-links').bind('hover', function() {
    $(this).find('.opt').show();
}, function() {
    $(this).find('.opt').hide();
});
于 2013-05-22T23:33:19.837 に答える