Question

我正在尝试使Jquery悬停功能起作用或使用mouseenter / mouseleave功能。我希望在另一个div悬停时添加和删除图像上的类和div。

我在这里创建了一个jFiddle：https://jsfiddle.net/ljk999/w5bmxyp4/

所以当div：

<div id="enhancedtextwidget-17" class="feature feat1 col-xs-6 col-sm-3 widget_text enhanced-text-widget">

徘徊我要删除＆＃34;开始＆＃34;来自img和＆＃34; feat-overlay＆＃34; div并添加一个＆＃34; hover-start＆＃34;他们。

任何人都可以帮我弄清楚如何做到这一点吗？

谢谢。

Answer 1

您要求的具体功能概述如下。我试图驾驶我认为你想要完成的事情，所以它可能不是你想要的，但我认为它很接近。似乎存在.toggleClass()瞬时行为和CSS代码时序的冲突，因此我将其放在JavaScript setTimeout()方法中以避免此问题。

您可以取消评论//$menuImg.toggleClass('start');以观察移除start课程时的行为。

var $menuShell = $('div#features > div'), $menuImg = $menuShell.find('img'), $featOverDiv = $menuShell.find('div.feat-overlay'), $sisterDivs = $menuShell.siblings();

var yesAnimate, noAnimate;

function startTimer() {
    yesAnimate = setTimeout(function() {
        //$menuImg.toggleClass('start');
        $featOverDiv.toggleClass('start');
    }, 600);
}

function leaveTimer() {
    noAnimate = setTimeout(function() {
        //$menuImg.toggleClass('start');
        $featOverDiv.toggleClass('start');
    }, 0);
}

$menuShell.not($sisterDivs).on('mouseenter', function() {
    startTimer();
    $menuImg.toggleClass('start-hover');
    $featOverDiv.toggleClass('start-hover');
});

$menuShell.not($sisterDivs).on('mouseleave', function() {
    leaveTimer();
    $menuImg.toggleClass('start-hover');
    $featOverDiv.toggleClass('start-hover');
});

Fiddle Example

jquery hover不会工作

1 个答案: