CODEWITHSUNDEEP
jquery
David Van Staden
David Van Staden

Reputation: 1779

Force mouseover/hover effect over element

I want to force a hover effect over one element when hovering over another: 

<div class="portfolio-item-holder">
   <div class="portfolio-item-hover-content"></div>
</div>


$('portfolio-item-hover-content').on('mouseover',function(){
        $('portfolio-item-holder').trigger('mouseover');
});

But this is not working.

Any help?

Upvotes: 1

Views: 6980

Answers (3)

LeGEC
LeGEC

Reputation: 51850

hover does not bind handlers to mouseover/mouseout, it binds them to mouseenter/mouseleave.

You can trigger the correct event : http://jsfiddle.net/FCxfR/26/

Note that you may observe weird behaviour with the animation (mouseover/mouseout and mouseenter/mouseleave behave differently - see the examples at the end of each documentation's page)

See if the plugin doesn't allow you to do what you want (trigger the animation on some other element).

Otherwise, you can hack your way by looking for the code snippet which animates the html, and, instead of using their framework, manually bind these two functions as handlers for mouseenter/mouseleave on your parent node.

You will also need to update the css accordingly, smth along the lines :

 //rules applying to
 .portfolio-item-hover-content:hover
 //should be replaced with rules applying to
 .portfolio-item-holder:hover .portfolio-item-hover-content

It goes without saying : you will then be the only one to know if this can break the behaviour of the plugin on the remainder of the page ...

Upvotes: 1

gitaarik
gitaarik

Reputation: 46300

You can't set the hover style using jQuery. I would recommend making a hover class in your css and applying it using addClass:

CSS:

.portfolio-item-holder:hover,
.portfolio-item-holder.hover {
    // these styles will be applied when naturally hovered
    // and when elements with the class "portfolio-item-holder"
    // also have the class "hover"
}

Javascript:

$('.portfolio-item-hover-content').on('mouseenter', function(){
    $('.portfolio-item-holder').addClass('hover')
});

And you can remove it on mouseleave:

$('.portfolio-item-hover-content').on('mouseleave', function(){
    $('.portfolio-item-holder').removeClass('hover')
});

Upvotes: 5

Adil Shaikh
Adil Shaikh

Reputation: 44740

Hmm, you forgot .

$('.portfolio-item-hover-content').on('mouseover',function(){
        $('.portfolio-item-holder').trigger('mouseover');
});

Upvotes: 4

Related Questions