Class is not embedded in DOM(Jquery)

Asked

Viewed 143 times

3

Following code:

<script>
$(document).ready(function() {
$("#inicio").hover(function() {
$("#inicio").addClass("fogo");
$("#inicio").removeClass("fogo");
});


});
</script>

And the HTML:

<li><a id="inicio">Inicio</a></li>

in class*(.fire)*, I entered these CSS codes, basically it displays a gif and positions it.

<style>
.fogo {
background-image: url("http://www.bestgraph.com/gifs/paysages/flammes/flammes-10.gif");
background-position: 0px center;
}
</style>

Forget styling, I removed the css to make it easier to visualize the code. I tested it here, and by hovering the mouse over "a," it gets a class, empty, leaving something like:

<li><a id="inicio" class="">Inicio</a></li>

What do I do to simply put the class . fire in the element, and when leaving the mouse remove it? For me basically using Hover, and two functions, the first to input the mouse on the element, and the other working on the output.. Grateful!

jquery addclass

  • Hello, I managed to fix the problem, actually it was just the misuse of the Hover. With the event I do the same thing that friends there suggested, only with less code! It asks for two functions, the first for when the mouse is on top of the element(mouseenter) and the second function is for when the mouse leaves the element(mouseleave). Basically it looks like this: $("#start"). Hover(Function() { $("#start").addClass("fire");}, Function() { $("#start").removeClass("fire");} ); See you later, thank you all!

2 answers

4


You are adding the class and then removing the class.

In the DOM notes that the attribute class is added but empty because jQuery adds the class to the element where to apply the attribute class but soon after as you are removing the class from the element, jQuery removes the class but leaves the attribute class emptiness.

Your initial HTML file:

<li><a id="inicio">Inicio</a></li>

After using the method .addClass():

<li><a id="inicio" class="fogo">Inicio</a></li>

After using the method .removeClass():

<li><a id="inicio" class="">Inicio</a></li>

Solution

It seems to me that you want to add the class when the mouse is over the element and remove when the mouse is over the element, then you can change your code to the following:

$( "#inicio" )
  .mouseenter(function() {
    $("#inicio").addClass("fogo");    
  })
  .mouseleave(function() {
    $("#inicio").removeClass("fogo");    
  });

So we delegate two events to the target element, the .mouseenter() to trigger an action when the mouse goes over the element, and the .mouseleave() when the mouse is no longer on top of the element.

4

Cheers! Your problem is the use of the wrong events. You should use mouseover and mouseout

look at an example working:

$(document).ready(function(){

    //evento quando o rato fica sob o elemento #inicio
    $("#inicio").mouseover(
      function(){
       $("#inicio").addClass("fogo");
      });
    //evento quando o rato sai sobre o elemento #inicio
    $("#inicio").mouseout(
        function(){
            $("#inicio").removeClass("fogo");
        });
});

Link to my jsfiddle test: http://jsfiddle.net/zgkcnLpd/ I hope it helps.

Browser other questions tagged jquery addclass

You are not signed in. Login or sign up in order to post.