javascript - jQuery :not(this) unexpected behavior

Question

期望:简单的 4 行菜单，悬停时 - 除带有 .snav 类悬停的 div 之外的所有 div 都应降低 css font-size 到 5px

**** 好的人们 - 是的，我知道有一个 CSS ONLY 解决方案，并且我知道其他解决方法 - 让我澄清一下，我只是在玩 Jquery 选择器和方法，我注释掉的 Jquery 选择器是预计可以像我上面列出的那样工作，但它没有，所以我改变了它。我的问题是寻求解释为什么注释掉选择器失败****

在查看下面的结构和 Jquery 时，我预计 .mouseover 的两个 Jquery 选择器版本都以相同的方式执行，但是注释掉的版本并未按预期执行。相反:它将字体大小更改应用于所有 .snav 类，并且不会按预期排除 (this) 对象。我正在寻找有人向我解释为什么一个选择器可以工作，但另一个选择器却不能以相同的方式执行。

//$('.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>

Answer 1

您的问题是因为您在 :not() 选择器中使用 this 作为字符串，而您需要使用 this > 关键字来引用元素本身:

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

也就是说，这里不需要 Javascript，您可以单独使用 CSS 来实现这一点:

.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>