Question

虽然我相信我的问题略有不同，但我知道还有其他几个问题得到了回答。

在我的导航中，您当前所在的页面在导航链接上有一个底部边框。我试图使用Jquery来制作它，这样当你将鼠标悬停在任何其他链接上时，除了悬停链接上的新边框外，所有边框都被删除。所以在JSFiddle的例子中，当我将鼠标悬停在＆＃34;关于＆＃34; ＆＃34; Home＆＃34;将替换为＆＃34;关于＆＃34;然后回到＆＃34; Home＆＃34;当鼠标离开时。

http://jsfiddle.net/6Ucmq/

有人有什么建议吗？所有帮助非常感谢！

            $(document).ready(function() {
        $(".navigation a").hover(
                        function() {           $(this).removeClass("hoverEffectSelect"); }

            function() { $(this).addClass(".hoverEffect"); },
            function() { $(this).removeClass(".hoverEffect"); }
            );
        });

Answer 1

尝试

$(document).ready(function () {
    var $home = $(".navigation a.hoverEffectSelect");
    $(".navigation a").hover(function () {
        $home.removeClass("hoverEffectSelect");
        $(this).addClass("hoverEffectSelect");
    },function () {
        $(this).removeClass("hoverEffectSelect");
        $home.addClass("hoverEffectSelect");
    });
});

演示：Fiddle

Answer 2

不需要jQuery：JSFiddle

我们的想法是将border-bottom应用于活动元素和到悬停的元素，但是当整个导航悬停在它上面时，它应该隐藏活动元素的边框。

HTML：

<div class="headingTop">
    <div class="navigation">
        <a  class="hoverEffect active" href=".html">HOME</a>
        <a  class="hoverEffect" href=".html">ABOUT</a>
        <a  class="hoverEffect" href=".html">PROJECTS</a>
        <a  class="hoverEffect" href="r.html">CONTACT</a>
    </div><!-- DIV navigation -->
</div><!-- DIV headingTop -->

CSS：

.navigation a {
    color: black;
    text-decoration: none;
    font-size: 20px;
    font-family: 'Roboto Condensed', 'Alef', sans-serif;
    margin-left: 20px;
    border-bottom: 0px solid transparent;
}

.hoverEffect {
    transition: border-bottom 300ms linear;
}
.navigation:hover>.active {
    border-bottom: 0px solid transparent;
}
.hoverEffect.active, .navigation>.hoverEffect:hover {
    border-bottom: 2px solid #EBCD37;
}

Answer 3

尝试：

$(".navigation a").hover(function() {
$(".navigation a").css('border-width', '0');
$(this).css('border', '3px solid black'); 
});

在这种情况下，您将首先删除边框，然后根据需要进行设置。

Answer 4

你可以这样做：

$(document).ready(function () {
    var index = $('a.hoverEffectSelect').index();
    $(".navigation a").hover(function () {
        $(".navigation a").removeClass("hoverEffectSelect");
        $(this).addClass("hoverEffect");
    }, function () {
        $(this).removeClass("hoverEffect");
        $('.navigation a').eq(index).addClass('hoverEffectSelect');
    });
});

<强> Fiddle Demo

Answer 5

试试这个

$(document).ready(function () {
                var olda = $('.navigation a.hoverEffectSelect').index();
                $(".navigation a").hover(function (olda) {
                    $('.navigation a').removeClass("hoverEffectSelect");
                    $(this).addClass("hoverEffect");
                }, function () {
                    $('.navigation a:eq(' + olda + ')').addClass("hoverEffectSelect");
                });

            });

DEMO

使用Jquery在悬停时删除/添加边框

5 个答案: