CODEWITHSUNDEEP
javascriptjquerycssajax
codek
codek

Reputation: 343

hover effects works strange over ajax loaded content

here it's the website: http://www.webkunst.comeze.com/test/

If you click on the left on artworks, it loads via ajax the page content (the items that appear on the right). The problem I have is that when I hover over the items, it does some kind of strange behavior, for example if I hover over the 4 to 9 items, it shows the hidden text but over the first three items, it's really strange.

This is how I do the effects:

To show the text, this is on my main js:

$(function(){
    $(document).on("mouseover",".item",function(){
        $(this).find(".art_title").fadeIn(200);
     });
     $(document).on("mouseleave",".item",function(){
        $(this).find(".art_title").fadeOut(200);
     });
});

To do the black transparent hover effect i'm using this tutorial : http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/ Which uses css with .item .mask

and this is my markup: enter image description here

What i'm doing wrong, why is doing that behavior?

I have to add that the effects works nice when the page it's not loaded via ajax.

Upvotes: 0

Views: 306

Answers (1)

Akhil F
Akhil F

Reputation: 7740

Give your .item elements position:relative css.

Your absolute .art_title elements are aligning to the top of the page (instead of to the top of the .item

Upvotes: 3

Related Questions