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.
EDIT
Try this code:
If it throws an error, please paste it here.