jquery - 如何在jQuery中悬停？

Question

我在创建表行后必须添加的事件上悬停，就像我想的那样。

这是必须完成的方式，因为在其他方面它不起作用。

<script>
    jQuery(document).ready(function() {
        jQuery('#userstable').on('hover', '.email', function() {
            $(this).append($("<span style='font-size:80%;'> <a href='#'>Edit</a>"));
        });
    });
</script>

我无法添加 out 事件。我会怎么做？

Answer 1

你想做on('mouseenter')而on('mouseleave')不是悬停。

您可以像这样同时执行它们：

    $('#userstable').on('mouseenter', '.email', function() {
        $(this).append($("<span style='font-size:80%;'> <a href='#'>Edit</a>"));
    });

    $('#userstable').on('mouseleave', '.email', function() {

    });

Answer 2

如果你想删除事件：

<script>
    jQuery(document).ready(function() {
        jQuery('#userstable').off('hover', '.email', function() {
            $(this).append($("<span style='font-size:80%;'> <a href='#'>Edit</a>"));
        });
    });
</script>

查看链接了解更多详情

Answer 3

$('element').hover(function() {
    // Hover on
}, function() {
    // Hover off
})

文档：http ://api.jquery.com/hover/

Answer 4

我想你可以用这个

$("#userstable").on(
{
    mouseenter: function() 
    {
        $("#editlink").show();
    },
    mouseleave: function()
    {
        $("#editlink").hide();
    }
});

在 HTML 中

<span id="editlink" style='font-size:80%;display:none'> <a href='#'>Edit</a></span>

Answer 5

试试这个代码：

jQuery(document).ready(function() {
    jQuery('#userstable').hover(function() {
        $(this).append($("<span style='font-size:80%;'> <a href='#'>Edit</a>"));
    },function() {
        // type mouse out statements here.
    });
});

Answer 6

<script>
    jQuery(document).ready(function() {
        jQuery('#userstable').on('mouseenter', '.email', function() {
            $(this).append($("<span style='font-size:80%;'> <a href='#'>Edit</a> | <a href='#'>Delete</a></span>"));
        });
        jQuery('#userstable').on('mouseleave', '.email', function() {
            $(this).find("span:last").remove();
        });
    });
</script>