Question

我在页面

下面有多个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>

隐藏了div class opt的{{1}}。我希望悬停锚标记，使隐藏的div只显示悬停的锚标记。我使用了下面的jQuery代码

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

当我悬停在锚标签上时，没有任何显示。但是，如果我删除.find()，隐藏的div会显示，但所有其他锚标记都不会悬停。

为什么会发生这种情况，我该如何解决？

Answer 1

CSS

.opt {visibility : hidden}

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

你不需要jQuery，但你不能用另一个锚点包装一个锚吗？

Answer 2

您无法使用hover方法使用on事件：

在jQuery 1.8中不推荐使用，在1.9中删除：名称“hover”用作字符串"mouseenter mouseleave"的简写。它为这两个事件附加了一个事件处理程序，处理程序必须检查event.type以确定事件是mouseenter还是mouseleave。不要将“hover”伪事件名称与.hover()方法混淆，后者接受一个或两个函数。

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

Answer 3

也许这会有所帮助

$('#menu-display > .note-links').bind('hover', function() {
    $(this).find('.opt').show();
}, function() {
    $(this).find('.opt').hide();
});

Jquery .find（）在这种情况下不起作用

3 个答案: