在另一个元素上触发悬停事件

Question

这是我的 html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="style/hover-min.css" rel="stylesheet" />
    <script src="js/jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.vidgroup .dxnb-img').addClass('hvr-buzz-out');

            $('.dxnb-item').on('mouseenter mouseleave', function (e) {
                console.log('in here!!!');
                $(this).closest('.dxnb-item').find('.dxnb-img').mouseenter();
            });
        });
    </script>
</head>
<body>
    <ul class="vidgroup">
        <li class="dxnb-item">
            <a class="dxnb-link" href="#">
                <img class="dxnb-img" src="images/Video_32x32.png" alt="" />
                <span>1 - Some text in here</span>
            </a>
        </li>
        <li class="dxnb-item">
            <a class="dxnb-link" href="#">
                <img class="dxnb-img" src="images/Video_32x32.png" alt="" />
                <span>1 - Some text in here</span>
            </a>
        </li>
        <li class="dxnb-item">
            <a class="dxnb-link" href="#">
                <img class="dxnb-img" src="images/Video_32x32.png" alt="" />
                <span>1 - Some text in here</span>
            </a>
        </li>
    </ul>
</body>
</html>

找到正在使用的悬停 css here

当我将鼠标悬停在图像上时，悬停效果很好。我的问题是，当我将鼠标悬停在父 li 中的任何内容上时，我也希望显示这种悬停效果。无论我做什么，我似乎都无法触发悬停事件。

我认为问题出在这一行..

$(this).closest('.dxnb-item').find('.dxnb-img').mouseenter();

我一定是做错了什么，任何帮助将不胜感激。谢谢

Answer 1

编辑

试试这个代码：

$(document).ready(function () {
    $('.vidgroup .dxnb-img').addClass('hvr-buzz-out');

    $('.dxnb-item').on('mouseenter mouseleave', function(e) {
        var image = $(this).find('.dxnb-img');
        image.trigger(e.type);
    });
});

如果出现错误，请粘贴到此处。

在另一个元素上触发悬停事件

Trigger hover event on another element

jquery

mouseover

mousehover