JS规则要影响悬停的2个单独的链接

Question

我在过去的几个小时中都花了几个小时来为我正在研究的网站上的2个单独链接制定悬停效果。这些链接在HTML中甚至都没有远程相关，因此我无法使用CSS（据我所知）来实现效果。不过是简单的悬停效果，可以改变霍夫上两个单独链接的颜色，无论用户徘徊在哪个链接上。目前没有图像，只有文字 - 我希望它保持这种方式（我在看着你，图形设计师的妻子）。

html涉及一个自举磁带＆amp;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将它们都瞄准。

现在，ID您要它在悬停时永久更改颜色，请使用以下方式：

$('.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_2切换ID_1，然后将颜色更改为任何内容。第一种颜色是将其更改为的颜色，第二种颜色将要回到原始的颜色。