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.