Apply jQuery effect to the current HTML element?

Asked

Viewed 340 times

2

I have the following code that when I put it to run, it gives display:None and display:block on all elements and I would like you to apply this effect only on the current element:

//jQuery  
$( ".titulo" ).mouseover (
      function() {
        $(".overlayContent").css("display", "none");
      }
    );
    $( ".titulo" ).mouseout (
      function() {
        $(".overlayContent").css("display", "block");
      }
    );

//HTML
<article>
     <span class="overlayContent" style="display: block;"></span>
     <h2 class="titulo" style="padding: 0 75px">Post</h2>
</article>

This span is a background-color:#000 with opacity:.5 that disappears when mouseover. Only that all disappear and I wanted only the current to disappear. You can see the effect on this link http://catalogos.axitech.com.br/

javascript jquery html css

  • @Kazzkiq doesn’t actually work because the only thing that comes up is overlay 0.5 between the image and the title positioned by position:absolute and z-index respective. If inspect element will see exactly the position of the elements.

  • And do you want the overlay to disappear only when you pass the code in the title? Or can it be in the whole block? It can only be with CSS or you want the solution with Javascript?

  • @Kazzkiq can be on the whole block. I tried on the whole block but it flashed like disco so I started trying with the title.

2 answers

3


I believe that for this problem only CSS already solve everything:

.detalhesArticleHome .overlayContent{
    opacity:0.5;
}

.detalhesArticleHome:hover .overlayContent{
    opacity:0;
}

What the above code does is assign the opacity you want to the element .overlayContent every time the mouse passes through the whole block.

If you want to do a "fade-in" and "fade-out" effect on the overlay, you can still use the property transition from CSS to animation.

  • I would like to apply a more worked effect type fadein and fadeout once with the script ready.

  • I applied the effect with Transition and css but this only works from version 10 of Internet Explorer but still solved.

2

It would be something like this:

$( ".titulo" ).mouseover (
  function() {
    $(this).prev(".overlayContent").css("display", "none");
  }
);
$( ".titulo" ).mouseout (
  function() {
    $(this).prev(".overlayContent").css("display", "block");
  }
);

  • dsantoro if you notice the code in the link <http://puu.sh/biOQY/307c5803e1.png> you can verify that your code did not work just because the class="overlayContent" is not exactly an item prior to class="titulo" ... any idea?

  • @dsantoro: It would be possible to elaborate a little better your resosta

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.