Javascript 要在jquery中创建悬停链接菜单吗

嘿

我想在jquery中鼠标悬停时创建一些悬停背景链接

当鼠标移到“.nav菜单nav a”上时，我添加addclass.hover，当鼠标移到removeClass.hover上时

有关我的小提琴的更多信息->

HTML: > >

JS:

函数hoverLi（）{

非常感谢

这是JSFIDLE

使用css选择器：悬停

这是一个伪类

更新您的CSS：

.navMenu nav {

  width: 100%; height: auto;
  list-style-type: none; margin: auto auto;
  text-align: center;

}


.navMenu a {

  height: 4em; width: 100%; 
  text-decoration: none; text-transform: uppercase;
  text-align: center; display: block;
  line-height: 4em; font-weight: normal;
  font-size: 1em; color: rgba(238,79,87,1); 
  position: relative; z-index: 100;

}

.navMenu nav:hover{

background:#000000;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
color:white;

}

---

如果您坚持使用jQuery，那么您只需要删除您的函数并只保留这一部分：

$(".navMenu nav a").hover(function(){
    $(this).addClass("hover");
},function(){
    $(this).removeClass("hover");
});

---

查看此..

我想您需要向悬停类添加背景色，如下所示：

.hover{
  background-color:#eee; 

}

---

然后调用

document.ready函数

，将HoverLi函数传递给它。

为什么不在CSS中简单地调用

.navMenu a:hover

？@Reeno，因为我想将左位置从100%动画化为0%，就像关键帧一样，但在jqueryes中，它是CSS，我想使用javascript hover@Axelschoten但为什么？并非所有浏览器都支持javascript，用户可以选择退出以禁用javascript，但不能禁用CSS。这也降低了页面加载时间，从而提高了SEO。是的，我知道，但我必须使用悬停时的轻松动画，我更喜欢使用Jquery hihi:o）这里是JSFIDLE，仅使用css轻松动画。谢谢，但我知道这样做，但我想使用javascript：{Ohoooo谢谢：D但现在我想要左右背景动画你说的左右背景动画是什么意思？@axelschouten将

过渡：所有1；

添加到需要设置的css选择器animated@user26409021user我是说鼠标在“div class=”hover上“从左侧0%开始，从左侧100%开始！！！！！你知道这是什么意思吗？就像关键帧悬停一样！”

.navMenu nav {

  width: 100%; height: auto;
  list-style-type: none; margin: auto auto;
  text-align: center;

}


.navMenu a {

  height: 4em; width: 100%; 
  text-decoration: none; text-transform: uppercase;
  text-align: center; display: block;
  line-height: 4em; font-weight: normal;
  font-size: 1em; color: rgba(238,79,87,1); 
  position: relative; z-index: 100;

}

.navMenu nav:hover{

background:#000000;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
color:white;

}

$(".navMenu nav a").hover(function(){
    $(this).addClass("hover");
},function(){
    $(this).removeClass("hover");
});

.hover{
  background-color:#eee;