javascript - JS规则会影响悬停时的2个独立链接

在过去的几个小时中，我一直在尝试为我正在处理的网站上的2个单独的链接计算悬浮效果。这些链接甚至在HTML中都不是远程相关的，所以我无法使用CSS（据我所知）来达到效果。不管用户将鼠标悬停在哪一个链接上，它都只是一种简单的悬停效果即可更改两个单独链接的颜色。目前没有图片，只有文字-我希望它能保持这种状态（平面设计师的妻子，我在看着你）。

html包含一个引导程序导航栏和WordPress网站首页上的链接，因此架构如下所示：

                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a class="abt" href="#">About</a></li>
                        <li><a class="prc" href="#">Work</a></li>
                        <li><a class="exp" href="#">Testimonials</a></li>
                        <li><a class="ofc" href="#">Locations</a></li>
                        <li><a class="con" href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>


    <section id="content" role="main">
    <article id="post-10" class="post-10 page type-page status-publish hentry">
    <header class="header">
    <h1 class="entry-title">Home</h1> <a class="post-edit-link" href="#post.php?post=10&amp;action=edit">Edit This</a></header>
    <section class="entry-content">
    <div class="links">
    <li><a class="abt" href="#/about/"><span class="pg abt1">
    <p>About</p>
    <p></span></a></li>

为此，我想重点关注“关于”部分-我很确定我需要jQuery或JS来完成我想要做的事情，但是我在这两者中都是高手！

最佳答案

好吧，你是对的。您需要jQuery。首先，您应该为两个链接标记提供相同的类，比方说foo。给两个链接标签都添加foo类。然后，使用jQuery将两者定位。

现在，如果您希望它在悬停时永久更改颜色，请使用THIS：

$('.foo').hover(function(){
$('.foo').css('color', 'red');
});

随意将红色更改为您喜欢的任何颜色。现在，如果您希望颜色仅在悬停时才更改，请使用以下命令：

$('.foo').mouseenter(function(){
$('.foo').css('color', 'red');
});

$('.foo').mouseleave(function(){
$('.foo').css('color', 'black');
});

在第二块中，将黑色更改为原始颜色。如果您不熟悉如何使用JQuery，请将以下标记添加到CSS样式表下方的代码中（如果适用）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

这使得浏览器可以读取jQuery。如果没有，浏览器将无法读取jQuery。

然后，将jQuery的两位之一复制并粘贴到文件中，将其保存为.js文件，然后通过<script>标记将其附加在上面列出的标记之后。或者，将jQuery放在两个脚本标签之间，如下所示：

<script type='text/javascript'>
//one of the two blocks of JQuery here
</script>

将其放在允许您使用jQuery的标签后面的代码中。

编辑：我收到了代码要求，以使它们具有不同的颜色。代码如下所示：

首先，您可以保留或删除该类。然后为它们分配单独的ID，例如id_1和id_2。然后，使用第一种方法：

$('#id_1').hover(function(){
$(this).css('color', 'red');
});
$('#id_2').hover(function(){
$(this).css('color', 'red');
});

悬停时，这将更改永久的颜色。使用第二种方法在悬停时更改颜色：

$('#id_1').mouseenter(function(){
$(this).css('color', 'red');
});
$('#id_1').mouseleave(function(){
$(this).css('color', 'black');
});

然后执行相同的操作，但是将id_1切换为id_2并将颜色更改为任何颜色。第一种颜色是更改为的颜色，第二种颜色是设置为原始的颜色。

关于javascript - JS规则会影响悬停时的2个独立链接，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30293100/