JS规则将在悬停时影响两个单独的链接

Question

在过去的几个小时里，我一直试图在我正在工作的网站上为两个不同的链接找到一个悬停效果。这些链接在HTML中甚至没有远程关联，因此我无法使用CSS (据我所能看到)来实现这种效果。改变hove上两个独立链接的颜色只不过是一个简单的悬停效果，而不管用户停留在哪个链接上。在这一点上没有图像，只有文字-我希望它保持这样(我看着你，平面设计师的妻子)。

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来完成我所追求的目标，但我在这两个方面都是初级的！

Answer 1

好吧，所以你是对的。你需要jQuery。首先，您应该做的是给两个链接标记相同的类，比如说foo。给两个链接标记类foo。然后，使用jQuery将两者都作为目标。

现在，如果希望它在悬停时永久更改颜色，请使用以下命令：

$('.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，并改变颜色为任何。第一种颜色是被更改为的颜色，第二种是将颜色调回原来的颜色。