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
– epascarello, Commented Nov 14, 2013 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
– Nick, Commented Nov 14, 2013 at 22:53
possible duplicate of How to force a hover state with jQuery? — Pointy
– Pointy, Commented Nov 14, 2013 at 22:54
Why cant you use: #przyciski img:hover (although not supported in IE7) — user2417483
– user2417483, Commented Nov 14, 2013 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
– J-P, Commented Jun 4, 2014 at 11:00

vittore · Accepted Answer · 2018-04-02 19:17:06Z

7

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

edited Apr 2, 2018 at 19:17

answered Nov 14, 2013 at 22:53

vittore

17.6k6 gold badges46 silver badges84 bronze badges

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

Collectives™ on Stack Overflow

Javascript simulate "hover" triggering CSS properties

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related