Geek Answers Handbook

The effect of a trigger hovering over another element on hover

I am having problems with this: I want to make the hover function over the image when infact freezes over the h3 element

HTML:

<p><a><img class="size-full wp-image-1236 alignleft" alt="phone-icon-red" src="..." width="50" height="50" /></a></p> <h3>Contact Us</h3>

CSS

 img:hover{ margin-left: 10px; }

JS:

 $('h3').hover(function(e){ e.preventDefault(); $(this).prev('p').find('img').trigger('mouseover'); });

See my fiddle

+4
source share
2 answers

I have a workaround for your problem.

Add the img class just like the hover pseudo-class:

 img:hover, img.hover{ margin-left: 10px; }

Bind mouseover and mouseout events to h3 element:

 $('h3').on({ 'mouseover': function() { $(this).prev('p').find('img').addClass('hover'); }, 'mouseout': function() { $(this).prev('p').find('img').removeClass('hover'); } });

fiddle

+3
source

you can use several jQuery event handlers:

 $("h3").on({ mouseenter: function(){ $('img').addClass('imgHoverClass'); }, mouseout: function(){ $('img').removeClass('imgHoverClass'); } });

working example: http://jsfiddle.net/7L4WZ/169/

enjoy :)

+2
source

More articles:


All Articles