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

【问题标题】：Using Jquery to remove/add border on hover使用 Jquery 在悬停时删除/添加边框
【发布时间】：2014-05-16 13:40:44
【问题描述】：

我知道还有其他几个主题回答了类似的问题，尽管我相信我的问题略有不同。

在我的导航中，您当前所在的页面在导航链接上有一个底部边框。我正在尝试使用 Jquery 来制作它，以便当您将鼠标悬停在任何其他链接上时，所有边框都将被删除，除了悬停链接上的新边框。因此，在 JSFiddle 的示例中，当我将鼠标悬停在“About”上时，“Home”上的下划线将被“About”上的下划线替换，然后在鼠标离开时返回“Home”。

http://jsfiddle.net/6Ucmq/

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

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

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

不需要 jQuery：JSFiddle

这个想法是将边框底部应用于活动元素和应用于悬停的元素，但是当整个导航悬停在它上面时应该隐藏活动元素的边框。

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

【讨论】：

哇，有趣。非常感谢。
@user3482096 不客气！我喜欢纯 CSS 解决方案，因为它们的效率比任何 JavaScript 解决方案都要高几个数量级，更不用说 jQuery！

【解决方案3】：

你可以这样做：

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

【讨论】：

【解决方案4】：

试试

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

【讨论】：

绝对完美。现在有道理了：）谢谢。

【解决方案5】：

试试：

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

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

【讨论】：

几乎完美！它唯一不做的就是将原始下划线返回到“主页”链接......嗯让我想想