Question

我有一个<ul>标记，可以在悬停时显示一些<li>。它在HTML中效果很好。现在，我想用jQuery更改它。我希望在悬停时不显示<li> #two和#three。我尝试使用e.preventDefault();阻止默认行为，但它不起作用。

如何使用jQuery更改:hover？换句话说，我希望#two和#three只用jquery隐藏在胡佛上

我可以在这里查看：https://jsfiddle.net/42jqt4pn/2/

＆＃13;

$("#language").mouseenter(function(e) {
  e.preventDefault();
});

＆＃13;

#language #two,
#language #three {
  display: none;
}
#language:hover #two,
#language:hover #three {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="language">
  <li id="one"><a href="#">en</a>
  </li>
  <li id="two"><a href="#">ca</a>
  </li>
  <li id="three"><a href="#">fr</a>
  </li>
</ul>

＆＃13;

Answer 1

渐进增强。我试着在javascript被禁用时制作基本的，然后在启用javascript时做出更好的设计

执行此操作的一种方法是使用javaScript在删除的body上设置类属性。这样您就知道访问者是否启用了JS并且可以相应地设置它。只需在您的所有＆＃39; no-js＆＃39;前加上前缀.no-js类名称的样式。

＆＃13;

//if the user has JS enabled, remove the no-js classname:
$("body").removeClass("no-js");

＆＃13;

#language #two,
#language #three {
  display: none;
}
/* the following rule is only applied when the no-js class is set on the body */
.no-js #language:hover #two,
.no-js #language:hover #three {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="no-js">
<ul id="language">
  <li id="one"><a href="#">en</a>
  </li>
  <li id="two"><a href="#">ca</a>
  </li>
  <li id="three"><a href="#">fr</a>
  </li>
</ul>
</body>

＆＃13;

Answer 2

只需在元素上切换一个类并修改css以考虑该类

$("#language").hover(function(){
   $(this).toggleClass('active')
});

CSS

#language #two, #language.active:hover #two
#language #three, #language.active:hover #three {
  display: none;
}

Answer 3

您可以使用jQuery＆＃39; .hover()方法：

＆＃13;

$("#language").hover(function() {
  $("#two").css("display", "none");
  $("#three").css("display", "none");
}, function() {});

＆＃13;

#language #two,
#language #three {
  display: none;
}
#language:hover #two,
#language:hover #three {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="language">
  <li id="one"><a href="#">en</a>
  </li>
  <li id="two"><a href="#">ca</a>
  </li>
  <li id="three"><a href="#">fr</a>
  </li>
</ul>

＆＃13;

更改：使用jQuery悬停

3 个答案: