Mouseover effect with jQuery

Question

I am unique in jQuery and need to create a simple way to detect via mouseenter, or Hover elements with the same class.

I created a menu with four buttons, all with the same class, so I put the mouse over one of them give an APPEND with a variable that adds two spans that will be effect masks.

Kind of:

<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>

And the 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;
}

I’m not getting to add the SPANS .spanMask2 and .spanMask2 independently inside the button the mouse is on top of. When the mouse is on top of one of them all receive the SPANS.

Answer 1

Use the 2 events so you add and remove when exit

.mouseover() para adicionar os spans com append()
.mouseleave() para remover os spans com .remove()

Answer 2

You must use the method Hover() together with the 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

Answer 3

Beet’s answer will solve it. But Voce is using the same class for, as I understand it, different items. One configuration will replace the other. I think Voce meant . spanMask1 and . spanMask2?

Anyway, using $(this) you will be applying the action to the object you gave Rigger in the function. In this case Trigger is Hover, so this applies only to what gave Hover and not to others.