Mouseover effect with jQuery

Navigation
0

I'm jquery in jquery and need to create a simple way to detect mouseenter, or hover elements with a same class.

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

Type like this: 

<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 can not add SPANS .spanMask2 and .spanMask2 independently within the button that the mouse is over. When the mouse is on top of one of them they all receive SPANS.

    
asked by anonymous 16.07.2014 / 22:43

3 answers

1

Use the 2 events so you add and remove when you leave 

.mouseover() para adicionar os spans com append()
.mouseleave() para remover os spans com .remove()
    
17.07.2014 / 02:11
0

You should use the hover () method 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

    
16.07.2014 / 22:59
0

The Beet's response will resolve. But you're using the same class to, as far as I understand, different items. One setting will replace the other. I think you meant .spanMask1 and .spanMask2?

Anyway, using $ (this) you are applying the action to the object that triggered the function. In this case the trigger is hover, so this applies only to hovering and not to others.

    
17.07.2014 / 05:45
Return jSON to a variable How to modify and save the new modified item in a listView?