0

Sou inicante no jQuery e preciso criar uma forma simples de detectar via mouseenter, ou hover elementos com uma mesma classe.

Criei um menu com quatro botões, todos com uma mesma classe, assim que eu coloco o mouse por cima de um deles dou um APPEND com uma variável que adiciona dois spans que serão mascaras de efeito.

Tipo assim:

<ul>
  <li class="linkMenu"><a href="#" class="classeDoLink">Link1</a></li>
  <li class="linkMenu"><a href="#" class="classeDoLink">Link2</a></li>
  <li class="linkMenu"><a href="#" class="classeDoLink">Link3</a></li>
  <li class="linkMenu"><a href="#" class="classeDoLink">Link4</a></li>
</ul>

E o CSS:

.linkMenu {
  display: table; 
  padding: 10px 15px; 
  background: #900;
  position:relative
}

.linkMenu a {
  text-decoration: none; 
  color: #FFF; 
  font-size: 14px; 
  font-family: Arial, Sans-Serif
}
.spanMask1, .spanMask2 {
  width: 100%; 
  height: 100%; 
  position: absolute; 
}

.spanMask2 {
  background: url(img.png) center center no-repeat; 
  z-index: 10;
}
.spanMask2 {
  background: url(img2.png) center center no-repeat;
  z-index: 20;
}

Eu não estou conseguindo adicionar os SPANS .spanMask2 e .spanMask2 de forma independente dentro do botão que o mouse esta por cima. Quando o mouse esta em cima de um deles todos recebem os SPANS.

1
  • Obrigado pela ajuda Beterraba XD Foi mal pela má edição da pergunta... Vou aplicar o que vocês me passaram depois posto aqui o resultado. Valeu Mesmo ainda mais pela rapidez em responder :D
    – Zambarah
    Commented 17/07/2014 às 13:45

3 Respostas 3

1

Usa os 2 eventos assim vc adiciona e remove quando sair

.mouseover() para adicionar os spans com append()
.mouseleave() para remover os spans com .remove()
1
  • Obrigado Dexxtz. Vou aplicar o que vocês me passaram depois posto aqui o resultado. Valeu Mesmo ainda mais pela rapidez em responder :D
    – Zambarah
    Commented 17/07/2014 às 13:45
0

Você deve usar o método hover() em conjunto com a keyword this.

$(".classeDoLink").hover(
  function() { // Função executada no hover in
    // O this, aqui, é o elemento que recebeu o hover.
    $(this).append($("<span>***</span>")); 
  }, function() { // função executada no hover out
    $(this).find("span:last").remove();
  }
);

JsBin

0

A resposta do Beterraba vai resolver. Mas voce está usando a mesma classe para, pelo que eu entendi, itens diferentes. Uma configuração vai substituir a outra. Acho que voce quis dizer .spanMask1 e .spanMask2?

De qualquer maneira, usando $(this) você estará aplicando a ação ao objeto que deu trigger na função. Nesse caso o trigger é hover, logo this se aplica apenas ao que deu hover e não aos outros.

1
  • Obrigado Reitz! Vou aplicar o que vocês me passaram depois posto aqui o resultado. Valeu Mesmo ainda mais pela rapidez em responder :D
    – Zambarah
    Commented 17/07/2014 às 13:47

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 .