Javascript simulate "hover" triggering CSS properties

Question

I have menu list that items change color while I'm hovering over it. I also have picture over which I would like to hover and the elements from the list would highlight(as I would hover directly over them).

I don't know how to trigger it by JS - I thought about simulating hovering over the exact item from the list.

Here are the codes:

CSS class

    #przyciski a:hover
    {
     color:orange;
     text-decoration:none;
     cursor: hand;
    }

HTML Code:

    <img src="img/kwadrat.jpg"  
    onCLick=""
    onmouseover="someFunction('itemFromTheList')"/>

If somebody could share some idea I would be thankful.

JavaScript can not trigger hover. Why doesn't the CSS reflect what you are doing? Add a new rule with a class, toggle the class. — epascarello, Nov 14 '13 at 22:52
Your example is very incomplete. You should post a JSFiddle that gives us something to work with. You're intention is to probably toggle the background color on another element when the mouse hovers on your link. — Nick, Nov 14 '13 at 22:53
possible duplicate of [How to force a hover state with jQuery?](http://stackoverflow.com/questions/2290829/how-to-force-a-hover-state-with-jquery) — Pointy, Nov 14 '13 at 22:54
Why cant you use: #przyciski img:hover (although not supported in IE7) — , Nov 14 '13 at 22:54
An example of :hover not activating: if you have a draggable element, created on mousedown, then at the end of the drag, :hover CSS is not applied to the element, until you move mouse out and back in again. I realise it's slightly niche, but when it happens, it's a real pain! — J-P, Jun 04 '14 at 11:00

vittore · Accepted Answer · 2018-04-02T19:17:06.260

Add another css rule identical to :hover but for a class, say '.hover'

#przyciski a:hover,  #przyciski a.hover
{
 color:orange;
 text-decoration:none;
 cursor: hand;
}

Say you have image

<img src="img/kwadrat.jpg"/>

Add handler to mouseover/mouseout events to trigger class on your ancor

$('img').on('mouseover', function () {
   $('#przyciski a').addClass('hover')
})

$('img').on('mouseout', function () {
   $('#przyciski a').removeClass('hover')
})

Update:

There is also shorthand for this:

$('img').hover( handlerIn, handlerOut )

And

$( 'img' ).hover( handlerInOut)

So you can do a one liner:

$('img').hover($('#przyciski a').toggleClass.bind('hover'))

Javascript simulate "hover" triggering CSS properties

1 Answers1