Tenho o seguinte código que quando coloco para rodar, ele dá display:none e display:block em todos os elementos e eu gostaria que aplicasse este efeito só no elemento corrente:
//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>
Este span é um background-color:#000
com opacity:.5
que desaparece quando mouseover. Só que todos desaparecem e eu queria que só o corrente desaparecesse. Poderá ver o efeito neste link http://catalogos.axitech.com.br/
overlay 0.5
entre a imagem e o titulo posicionado porposition:absolute
ez-index
respectivos. Se inspecionar elemento verá exatamente a posição dos elementos.