使用Jquery悬停事件改变css

Using Jquery hover event to change css

本文关键字：改变 css 事件 悬停 Jquery 使用      更新时间：2023-09-26

所以，我试图使用bootstrap "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

    $( ".otherNavs" ).hover(function() {
            $("#active" ).css("color", "#68ddff !important");
                $("#active" ).css("color", "#68ddff !important");
                $("#active").css("background", "#0f2436")
                $("#active").css("background", "-webkit-linear-gradient(#0f2436, #14335c)")
                $("#active").css("background", "-o-linear-gradient(#0f2436, #14335c)")
                $("#active").css("background", "-moz-linear-gradient(#0f2436, #14335c)")
                $("#active").css("background", "linear-gradient(#0f2436, #14335c)")
            });
正如你现在可能已经注意到的……有一个曲线球。我的背景是渐变的，所以我不得不使用所有的浏览器支持狗屁，哈哈。

我想肯定这段代码应该工作，但它不是。

此外，我已经确认我的jquery库是功能性的，我在我的代码的另一部分使用它。

我确实意识到，当我完成悬停时，我不支持"Pop it back in place"，但一旦我让初始代码工作，这是很容易的部分。

编辑:

所以我用了一个更简单的方法，简单地删除类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>

和我的新jquery:

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

然而，这段代码仍然不起作用。什么好主意吗?

谢谢

我认为当鼠标悬停在元素上时应该使用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");
  });
});

你的代码应该工作，如果你把你的<script>前关闭</body>标签。

纯CSS:

#navbar:hover .active:not(:hover) {
  color: #68ddff !important;
  background: "#0f2436";
  background: -webkit-linear-gradient(#0f2436, #14335c);
  background: -o-linear-gradient(#0f2436, #14335c);
  background: -moz-linear-gradient(#0f2436, #14335c);
  background: linear-gradient(#0f2436, #14335c);
<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>

相关文章：