jquery hover won't work

Question

I am trying to get the Jquery hover function to work or the mouseenter/mouseleave functions to work. I want to add and remove classes on an image and div when another div is hovered.

I created a jFiddle here: https://jsfiddle.net/ljk999/w5bmxyp4/

So when the div:

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

is hovered I want to remove the "start" class from the img and the "feat-overlay" div and add a class of "hover-start" to them.

Can anyone help me figure out how to do that?

Thank you.

When I hover over the circle the highlight moves from the top left to the top right. What is supposed to happen instead? — Barmar

Alexander Dixon Alexander Dixon · Accepted Answer · 2015-07-29T20:14:26

The specific functionality that you asked for is outlined below. I tried to drive what I thought you were trying to accomplish so it may not be exactly what you wanted but I think it is close. There seemed to be a clash of the .toggleClass() instantaneous behavior and the CSS code timing so I put it in a JavaScript setTimeout() method to avoid the issue.

You can un-comment the //$menuImg.toggleClass('start'); to observe the behavior when the start class is removed.

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 won't work

1 Answers