JQuery - trigger hover over separate element

Question

Simple question - how do I make an element appear to be hovered when I trigger it from another element?

Example jsfiddle: http://jsfiddle.net/xpvt214o/391305/

Body:

<span class="itemA"></span>
<button>
TriggerAHover
</button>

Js:

   $(document).ready(function(){
    $('button').on("click", function(){
      $('.itemA').trigger('mouseover');
    })
    });

Css:

   .itemA {
     display:block;
            background: blue;
            width: 40px;
            height: 40px;
        }

        .itemA:hover {
            background: red;
        }

This fiddle creates a blue background span. On hover, the span changes red.
I want the span to also change to a hovered state on click of the button. I've tried .trigger('mouseover'), .trigger('mouseenter'), and .trigger('hover'), but they do not change the span element to its hovered state.

Jorgedl · Accepted Answer · 2018-07-10 18:58:20Z

3

mouseover or mouseenter will just trigger .on("mouseenter") or .on("mouseover") functions. css hover is only activated by the pointer

Why dont you just add a class on click that has the same style as :hover?

answered Jul 10, 2018 at 18:58

Jorgedl

1573 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

R. StackUser Over a year ago

I know I can add a class, I first wanted to see if my question was possible before working around it. Seeing as it doesn't seem possible now, I will end up doing it the way you stated, thank you

David · Accepted Answer · 2018-07-10 19:27:51Z

0

Like what Jorgedl said I think it would be better to switch the class.

$(document).ready(function(){
  $('button').click(function() {
     $('.itemA').toggleClass('itemA hovered');
  });
});

CSS:

  .hovered {
        display:block;
        background: red;
        width: 40px;
        height: 40px;
    }

answered Jul 10, 2018 at 19:27

David

9912 bronze badges

Collectives™ on Stack Overflow

JQuery - trigger hover over separate element

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related