Trigger hover event on another element

Question

Trigger hover event on another element

1k Views Asked by RedCoupe At 19 October 2024 at 19:43

Here is my 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>

The hover css being used is found here

When I hover over the image, the hover effect works fine. My issue is that I would also like this hover effect to display when I hover over anything in the parent li. No matter what I do I cant seem to trigger that hover event.

I think the problem lies with this line..

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

I must be doing something wrong, any help would be appreciated. Thanks.

Original Q&A

There are 1 best solutions below

**Skatch** · Accepted Answer

EDIT

Try this code:

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

If it throws an error, please paste it here.

Trigger hover event on another element

There are 1 best solutions below

Related Questions in JQUERY

Related Questions in MOUSEOVER

Related Questions in MOUSEHOVER

Trending Questions

Popular # Hahtags

Popular Questions