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); }); });

如果它抛出错误，请将其粘贴到此处。

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

1 个答案: