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

Question

在过去的几个小时里，我一直在努力为我正在处理的网站上的 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 来完成我所追求的，但我在这两个方面都是初学者!

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

在第二 block 中，将黑色更改为原始颜色。如果您不熟悉如何使用 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 的标记之后。

编辑:我收到了一个代码请求，使它们具有不同的颜色。代码如下所示:

首先，您可以保留或删除类(class)。然后为它们分配单独的 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，并将颜色更改为任何颜色。第一种颜色是要更改的颜色，第二种颜色是设置回原来的颜色。