Question

期望：简单的4行菜单，悬停时 - 除.snav以外的所有div除css font-size到5px

**** OK人 - 是的，我知道有一个CSS ONLY解决方案，我知道其他解决方法 - 让我澄清，我只是在玩Jquery选择器和方法，我注释掉的Jquery选择器是我希望按照上面列出的方式工作，但我没有改变它。我的问题是寻找一个解释为什么那个评论选择失败****

在查看下面的结构和Jquery时，我希望.mouseover的两个Jquery选择器版本以相同的方式执行，但是注释掉的那个版本没有按预期执行。相反：它将字体大小更改应用于所有.snav类，并且不会按预期排除（this）对象。我正在寻找有人向我解释为什么一个选择器有效但另一个选择器执行方式不同。

＆＃13;

//$('.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");
});

＆＃13;

.snav {font-size:15px; height:30px; line-height:30px;cursor:pointer;width:120px; border:thin solid black;}

＆＃13;

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

＆＃13;

Answer 1

您的问题是因为您在this选择器中使用:not()作为字符串，而您需要使用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>

Answer 2

您已将this嵌入字符串中;它不会被评估为this，因为它存在于函数中。尝试

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

在jQuery / Sizzle或浏览器的原生querySelectorAll()内，该字符串＆＃34;此＆＃34;只是字母t h i s。该代码无法知道函数中this的值。您根本无法创建直接涉及DOM元素引用的选择器字符串。

Answer 3

您不能在选择器字符串中使用this。

JavaScript中存在this关键字，并引用运行代码的当前上下文。 CSS选择器没有this关键字，它不了解JavaScript上下文。

Jquery：不是（这）意想不到的行为

3 个答案: