CODEWITHSUNDEEP
javascriptjquery
DMSJax
DMSJax

Reputation: 1727

Jquery :not(this) unexpected behavior

Expectation: Simple 4 line menu, on hover - all divs except the one hovered over with class .snav should lower css font-size to 5px

**** OK PEOPLE - Yeah i know there is a CSS ONLY solution and I know other approaches for resolution -- let me clarify, I was just playing with Jquery selectors and methods, and the Jquery selector I commented out was EXPECTED to work as i listed above, it didn't so i changed it. my question was seeking an explanation for why that commented out selector FAILED ****

In looking at the structure and Jquery below, I expected both Jquery selector versions of the .mouseover to perform the same way, however the one commented out does not perform as expected. instead: It applies the font-size change to all .snav classes and does not exclude the (this) object as expected. I'm looking for someone to explain to me why one selector works but the other does not perform the same way.

//$('.snav').mouseover(function() {
//    $('.snav:not(this)').css("font-size","5px"); 
//});

$('.snav').mouseover(function() {
    $('.snav').not($(this)).css("font-size","5px"); 
});

$('.snav').mouseout(function(){ 
    $('.snav').css("font-size","15px");
});
.snav {font-size:15px; height:30px; line-height:30px;cursor:pointer;width:120px; border:thin solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <div id="nav1" class="snav">HOME</div>
  <div id="nav2" class="snav">PAGE 1</div>
  <div id="nav3" class="snav">PAGE 2</div>
  <div id="nav4" class="snav">PAGE 3</div>
</div>

Upvotes: 0

Views: 65

Answers (3)

Rory McCrossan
Rory McCrossan

Reputation: 337666

Your issue is because you're using this as a string in the :not() selector, whereas you need to use the this keyword instead, to reference the element itself:

$('.snav').mouseover(function() {
    $('.snav').not(this).css("font-size", "5px"); 
});

That said, there's no need for Javascript here, you can achieve this in CSS alone:

.snav {
  font-size: 15px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  width: 120px;
  border: thin solid black;
}
#menu:hover .snav {
  font-size: 5px;
}
#menu .snav:hover {
  font-size: 15px;
}
<div id="menu">
  <div id="nav1" class="snav">HOME</div>
  <div id="nav2" class="snav">PAGE 1</div>
  <div id="nav3" class="snav">PAGE 2</div>
  <div id="nav4" class="snav">PAGE 3</div>
</div>

Upvotes: 2

Guffa
Guffa

Reputation: 700680

You can't use this in a selector string.

The this keyword exists in JavaScript and references the current context where the code is running. There is no this keyword for CSS selectors, it doesn't know about the JavaScript context.

Upvotes: 1

Pointy
Pointy

Reputation: 413956

You've got this embedded in the string; it won't (and can't) be evaluated as this as it exists in the function. Try

$('.snav').mouseover(function() {$('.snav').not(this).css("font-size","5px"); });

Inside jQuery/Sizzle or the browser's native querySelectorAll(), that string "this" is just the letters t h i s. That code has no way of knowing the value of this in your function. You simply cannot create a selector string that involves a DOM element reference directly.

Upvotes: 1

Related Questions