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.

Answer 1

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'))