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