Question

所以，我正在尝试使用bootstraps“active”类，但是当我将鼠标悬停在不同的导航栏链接上时，我希望“active”能够看到另一个没有悬停的导航栏链接。< / p>

以下是我的相关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>

这是我的Relavent 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库是可用的，我在我的代码的另一部分使用它。

我确实知道当我完成悬停时，我不支持“将其弹回原位”，但是一旦初始代码正常工作，这就很容易了。

编辑：

所以我接触了一个更简单的方法，只需删除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");
        });

但是，此代码仍无法正常运行。有什么想法吗？

由于

Answer 1

我认为当鼠标悬停在元素上时你应该使用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>标记之前，则代码应该有效。

Answer 2

纯CSS：

＆＃13;

#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);

＆＃13;

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

＆＃13;

使用Jquery悬停事件来更改css

2 个答案: