2

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/

3
  • @Kazzkiq na verdade não existe funcionamento porque a unica coisa que aparece é o overlay 0.5 entre a imagem e o titulo posicionado por position:absolute e z-index respectivos. Se inspecionar elemento verá exatamente a posição dos elementos. Commented 2/09/2014 às 21:22
  • E você quer que o overlay suma apenas quando se passar o código no título? Ou pode ser no bloco inteiro? Pode ser apenas com CSS ou você quer a solução com JavaScript?
    – Kazzkiq
    Commented 2/09/2014 às 21:24
  • @Kazzkiq pode ser no bloco inteiro. Eu tentei no bloco inteiro mas ficou piscando que nem discoteca ai eu comecei a tentar com o titulo. Commented 2/09/2014 às 21:25

2 Respostas 2

3

Acredito que para este problema apenas CSS já resolva tudo:

.detalhesArticleHome .overlayContent{
    opacity:0.5;
}

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

O que o código acima faz é atribuir a opacidade que você deseja ao elemento .overlayContent toda vez que o mouse passar pelo bloco inteiro.

Caso você queira fazer um efeito "fade-in" e "fade-out" no overlay, é possível utilizar ainda a propriedade transition do CSS para a animação.

2
  • Eu gostaria da aplicar um efeito mais trabalhado tipo fadein e fadeout uma vez com o script pronto. Commented 2/09/2014 às 21:34
  • Apliquei o efeito com transition e css mas isso só funciona a partir da versão 10 do Internet Explorer mas mesmo assim resolveu. Commented 2/09/2014 às 21:40
2

Seria algo mais ou menos assim:

$( ".titulo" ).mouseover (
  function() {
    $(this).prev(".overlayContent").css("display", "none");
  }
);
$( ".titulo" ).mouseout (
  function() {
    $(this).prev(".overlayContent").css("display", "block");
  }
);
2
  • dsantoro se reparar no código no link <puu.sh/biOQY/307c5803e1.png> poderá verificar que o seu código não deu certo só porque a class="overlayContent" não está exatamente um item anterior a class="titulo" ... alguma ideia? Commented 2/09/2014 às 21:14
  • @dsantoro: Seria possével elaborar um pouco melhor sua resosta Commented 2/09/2014 às 21:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .