Apply jQuery effect to the current HTML element?

Question

Apply jQuery effect to the current HTML element?

Navigation

#1 by (3 votes)
#2 by (2 votes)

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 it to apply this effect only to 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 background-color:#000 with opacity:.5 that disappears when mouseover. Only they all disappear and I wanted only the current to disappear. You can see the effect on this link link

javascript html jquery css

asked by anonymous 02.09.2014 / 22:59

2 answers

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");
  }
);

02.09.2014 / 23:05

How to tell if an NSArray is empty (or null) using IF Refresh the content of a page without reloading it

score 3 · Accepted Answer

I think for this problem only CSS already solves everything:

.detalhesArticleHome .overlayContent{
    opacity:0.5;
}

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

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

If you want to fade-in and fade-out in the overlay, you can still use the CSS% property for the animation.