Implement this

Question

Implement this

Navigation

#1 by (7 votes)
#2 by (5 votes)

5

There are several divs with class .categorias and I need to display the .nav-a element only in the div category that I have with the mouse on it at the moment.

What's happening now is that when I hover over any of the% d and .categorias it displays the .nav-a in all of them, not just the .categorias .

Follow the current code for reference.

$(document).ready(function(){
    $('.nav-a').hide();

    $('.categorias').mouseenter(function(){
         $('.nav-a').fadeIn();
    });

    $('.categorias').mouseleave(function(){
         $('.nav-a').fadeOut();
    });
});

javascript jquery

asked by anonymous 10.07.2014 / 19:16

2 answers

5

Just to complement the correct response from @DiegoVieira, you can also group these events as follows:

Tip : $('.nav-a').hide() , use your CSS for this.

$( '.categorias' ).on({
     mouseenter: function() {
    $(this).find('.nav-a').fadeIn();
  }, mouseleave: function() {
    $(this).find('.nav-a').fadeOut();
  }
});

10.07.2014 / 19:30

How to access a selector inside another in jquery? Why does "int ('1111', 2)" return "15" in Python?

score 7 · Accepted Answer

Use this way

Jquery

$(document).ready(function(){
    $('.nav-a').hide();

    $('.categorias').mouseenter(function(){
         $(this).find('.nav-a').fadeIn();
    });

    $('.categorias').mouseleave(function(){
         $(this).find('.nav-a').fadeOut();
    });
});

Another way to do and "minimize code"

$(document).ready(function(){  
   $('.categorias')
     .mouseenter(function(){
         $(this).find('.nav-a').fadeIn();
    })
     .mouseleave(function(){
          $(this).find('.nav-a').fadeOut();
    });
});

Very well noticed by our friend @RonnyAmarante remove this from your code: $('.nav-a').hide(); and do it in your CSS.

CSS

.nav-a {
   display: none;
}