Force element state hover in function of another hovered element / jQuery

Question

I saw many things about the state hover and jQuery but nothing about my issue. I want to force a class to become :hover when another class is :hover. Difficult to explain so here my code:

$(document).mousemove(function() {    
if($('.h').is(':hover')){ 
    $('.h .btn-1e').trigger('mousover');
}
});

The fact is that second class hover is a bit complicated and I can't make it by addClass / removeClass (the hover include :after things, animations etc ..)

Thanks for the help and sorry about my english!

Have you tried .mouseenter() and .mouseleave() from http://stackoverflow.com/questions/11038638/simulate-hover-in-jquery ? — user3333134, Oct 12 '15 at 17:49
I saw the post but i don't think this what i need. I don't want to add a class when one element is hovered, i just want to simulate the hover on the second element when the first is hovered. — Jordan, Oct 12 '15 at 17:55

score 1 · Accepted Answer · answered Oct 12 '15 at 18:25

I would do it in that way:

Define your own new hover class (i know you wrote, that you hover css is complicated but of course you can replace your hover with a hover class, here you can also add :after ...):

.class1,
.class2 {
    width: 40px;
    height: 40px;
    margin: 30px;
    background-color: gray;
}
/* your element has an additional hover class */
.class1.hover,
.class2.hover {
    background-color: red;
}

Now set this hover class in this hover event function with jquery:

$(".class1, .class2").hover(function() {
    //mouseenter
    $(this).addClass("hover");
}, function(){
    //mouseleave
    $(this).removeClass("hover");
});

And now you can say, that all class2 elements should become the hover state (that is your hover class) when the mouse hovers a class1 element:

$(".class1").mouseenter(function() {
    //on hover class1 force hover state to class2
    $(".class2").mouseenter();
}).mouseleave(function() {
    //remove it on mouseleave
    $(".class2").mouseleave();
});

I've made you a jsfiddle to play with: https://jsfiddle.net/0txLn21c/1/

For more information you can read the API:

https://api.jquery.com/hover/

https://api.jquery.com/mouseover/

I hope, this could help you and i don't know your code, but i think it isn't impossible to use a hover class in your case. For example you can give your hover class an :after element or an animation to:

.class1.hover:after {
    /* content, animations ... */
}

thank you @sim ! But after some tries it's still not working.. I got this error : Uncaught RangeError: Maximum call stack size exceeded I made a jsfiddle too here : https://jsfiddle.net/zcgrfc9v/6/ — Jordan, Oct 12 '15 at 19:01
i cant't reproduce your error, but is it right, that you want to animate the buttons when mouseenter in the .choice divs? So i made this only with CSS: https://jsfiddle.net/zcgrfc9v/7/ if you don't want to do this, let me know! — Sim, Oct 13 '15 at 06:31
Well, it's perfect like this ! Thank you so much Sim ! You saved my life — Jordan, Oct 13 '15 at 07:01

score 0 · Answer 2 · answered Oct 12 '15 at 17:53

0

I usually trigger events like this:

$(document).mousemove(function() {    
    if($('.h').is(':hover')){ 
        $('.h .btn-1e').mouseover();
    }
});

Have you tried that?

answered Oct 12 '15 at 17:53

BadHorsie

14,135
30
117
191

@Jordan Have you checked that `$('.h .btn-1e').length` is not 0? If it is, it means your selector isn't finding anything. – BadHorsie Oct 12 '15 at 18:15
Yes it returns me "1" for $('.h .btn-1e').length – Jordan Oct 12 '15 at 18:17

Force element state hover in function of another hovered element / jQuery

2 Answers2