当其他div具有相同的类时，您将鼠标悬停在div上的addClass

Question

I have an issue where I want to add a class to one of the section divs below on hover:

<div class="container">
  <div class="section">Stuff</div>
  <div class="section">Stuff</div>
  <div class="section">Stuff</div>
  <div class="section">Stuff</div>
  <div class="section">Stuff</div>
</div>

This code adds the class to them all, how can I make it just the one you are hovering over? I read up on jquery .next but couldn't get it to work either. NOTE: the section divs are from a loop and are all the same class name, I cannot change this.

jQuery is:

jQuery(".container .section").hover(
  function() {
    jQuery(".section").addClass("selected");
  },
  function() {
    jQuery(".section").removeClass("selected");
  }
);

Fiddle @ http://jsfiddle.net/8juoy2vz/

Answer 1

Try this, ( $(this) refers to current element, in our case it will be one of the .section )

jQuery(".container .section").hover(
    function() {
        $(this).addClass("selected");
    },
    function() {
        $(this).removeClass("selected");
    }
);

Example

Answer 2

Use jQuery(this) instead of jQuery(".section") :

jQuery(".container .section").hover(function () {
    jQuery(this).addClass("selected");
}, function () {
    jQuery(this).removeClass("selected");
});

 jQuery(".container .section").hover(function () { jQuery(this).addClass("selected"); }, function () { jQuery(this).removeClass("selected"); }); 

 .selected { color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container"> <div class="section">Stuff</div> <div class="section">Stuff</div> <div class="section">Stuff</div> <div class="section">Stuff</div> <div class="section">Stuff</div> </div> 

jQuery(".section") selects all elements that have the class section, while jQuery(this) refers to only the element that's being referenced.

Answer 3

Why not do it all in CSS?

You could have something like this:

.section:hover {
  // Whatever you had in the .selected class
}

Here's a demo: http://jsfiddle.net/8juoy2vz/3/