0

我在一个页面上有多个以下HTML元素

<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>

divwithclass 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"。它为这两个事件附加了一个事件处理程序，并且处理程序必须检查event.type以确定事件是mouseenter还是mouseleave。不要将“悬停”伪事件名称与.hover()接受一两个函数的方法混淆。

$('#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 回答