Trigger hover effect over another element when hovering an element

Question

I am having issues with this: I want to force a hover function over the image when infact hovering 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

dzbo · Accepted Answer · 2013-04-04 10:33:19Z

4

I have workaround for your issue.

Add img class same as 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

answered Apr 4, 2013 at 10:33

dzbo

1,1537 silver badges13 bronze badges

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

Comments

Michael Nguyen · Accepted Answer · 2013-04-04 10:46:19Z

2

you can use multiple jQuery event handlers:

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

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

enjoy :)

answered Apr 4, 2013 at 10:46

Michael Nguyen

211 bronze badge

Collectives™ on Stack Overflow

Trigger hover effect over another element when hovering an element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related