Javascript 使用Jquery悬停事件更改css

所以，我尝试使用引导“active”类，但是当我将鼠标悬停在另一个导航栏链接上时，我希望“active”可以看到其他未悬停的导航栏链接

以下是我的相关HTML：

<div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a id="active" href="#">TOWER DUEL</a></li>
                        <li><a class="otherNavs" href="#thecrew">THE CREW</a></li>
                        <li><a class="otherNavs" href="./presskit/">PRESSKIT</a></li>
                    </ul>
      </div>

正如你现在可能已经注意到的。。。有一个曲线球。我的背景是渐变色，所以我不得不使用所有那些支持浏览器的废话，哈哈

我已经到了我喜欢这个代码的地步，但是它不是

另外，我已经确认了jquery库的功能，我正在代码的其他部分使用它

我确实意识到，当我完成悬停时，我不支持“将它放回原位”，但一旦我开始运行初始代码，这是最简单的部分

编辑：

因此，我采用了一种简单得多的方法，只需删除onhover类，然后将其添加回：

<div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li id="activePage" class="active"><a href="#">TOWER DUEL</a></li>
                        <li><a class="otherNavs" href="#thecrew">THE CREW</a></li>
                        <li><a class="otherNavs" href="./presskit/">PRESSKIT</a></li>
                    </ul>
      </div>

然而，这段代码仍然不起作用。有什么想法吗

---

谢谢

我认为当鼠标悬停在元素上时应该使用

addClass（）

，当鼠标停止悬停时应该使用

removeClass（）

，而不是

css（）

，如下所示：

$(".otherNavs").hover( function () {
    $(".active").addclass("myclass");
}, function () {
    $(".active").removeclass("myclass");
});

然后将其添加到您的

CSS

：

.myclass {
    color: #68ddff !important;
    background: #0f2436;
    background: -webkit-linear-gradient(#0f2436, #14335c);
    background:    -moz-linear-gradient(#0f2436, #14335c);
    background:      -o-linear-gradient(#0f2436, #14335c);
    background:         linear-gradient(#0f2436, #14335c);
}

更新：

对于新标记，请使用以下命令：

$(document).ready(function() {
  $(".otherNavs").hover(function() {
    $("#activePage").removeClass("active");
  }, function() {
    $("#activePage").addClass("active");
  });
});

如果您将

放在关闭

标记之前，您的代码应该可以工作。

纯CSS：

导航栏：悬停。活动：非（：悬停）{ 颜色：#68ddff！重要； 背景：“0f2436”； 背景：-webkit线性梯度（#0f2436，#14335c）； 背景：-o-线性梯度（#0f2436，#14335c）； 背景：-moz线性梯度（#0f2436，#14335c）； 背景：线性梯度（#0f2436，#14335c）；

你想使用active as class还是active as id？你的代码两者都有。哈哈，我最初在jquery中使用“$（.active a）”来获取它，试图解决问题，也许这就是问题所在，所以我直接在“a”标记中添加了一个单独的id，希望它能工作。据我所知，相同的类和id名称不会冲突。“我的背景是渐变，所以我不得不使用所有浏览器支持的废话，哈哈”-这是因为你做得不对，也就是“废话”，通过脚本操纵样式，哈哈。“但是当我悬停在不同的导航栏链接上时，我希望“活动”可以看到其他未悬停的导航栏链接"-所以你真正想要的是，当另一个链接悬停时，从包含它的元素中删除活动类，然后再添加回来。在初始化时将对该元素的引用存储到变量中，这非常简单。这比我的想法要好。这实际上是我尝试的，我对它做了一点调整：这样就可以了删除活动类（并转到我的默认导航栏样式）并在我完成时将其添加回。但它不起作用？它不起作用，因为：1）您正在从没有活动类的元素中删除

活动类，2）一旦您从元素中删除
活动类，则无法使用
$（“.active”）对其进行寻址
。你必须使用一个像
myclass
这样的新类来应用你的风格。我的新编辑是否像你说的那样？还是我把它弄得更糟？（我编辑了我的第一篇文章）非常感谢！：）这是一个可选的问题，但等待文档准备就绪的原因是什么？我如何知道将来如何应用它？这取决于您在页面上放置标记的位置：1）如果您将其放置在中，则需要等待，直到加载所有HTML元素（即文档准备就绪）在操作它们之前，或者2）如果您将它们放在结束标记之前，则所有元素都已加载，因此您不需要document.ready部分。第二种方法被认为更好，因为它显著减少了页面加载时间。
.myclass {
    color: #68ddff !important;
    background: #0f2436;
    background: -webkit-linear-gradient(#0f2436, #14335c);
    background:    -moz-linear-gradient(#0f2436, #14335c);
    background:      -o-linear-gradient(#0f2436, #14335c);
    background:         linear-gradient(#0f2436, #14335c);
}

$(document).ready(function() {
  $(".otherNavs").hover(function() {
    $("#activePage").removeClass("active");
  }, function() {
    $("#activePage").addClass("active");
  });
});