如何在悬停时更改另一个链接的颜色？ [英] How to change the color of another link on hover?

问题描述

这是简单的HTML代码：

This is the simple HTML code:

<li class="main">
<a href="#">ImageLink</a> <!--1st anchor tag-->
<a href="#">ImageName</a> <!--2nd anchor tag-->
</li>

是否可以在第一个锚标签的悬停状态下更改第二个锚标记的颜色？ （反之亦然。）

Is it possible to change the color of 2nd anchor tag on hover state of 1st anchor tag? (And vice versa.)

推荐答案

不是用css。这种操作只能通过脚本完成。

Not with css. This kind of actions can only be done by script.

如果使用jQuery，可以添加以下脚本：

If you use jQuery you could add the following script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript>

        $(document).ready(function(){

            var a1 = $('a:first');
            var a2 = $('a:second');

            a1.hover(function(){ a2.toggleClass('hover') }, function(){ a2.toggleClass('hover') });
            a2.hover(function(){ a1.toggleClass('hover') }, function(){ a1.toggleClass('hover') });

        });
</script>

现在你可以使用用于指定颜色的悬停类：

Now you can use the hover class to specify the color:

.hover { color: red; }

编辑
给两个一个是一个id，所以你可以使用 var a1 = $（'＃a1'）; 来引用它们。

Edit It would be easier to give both a's an id, so you could reference them by using var a1 = $('#a1');.

这篇关于如何在悬停时更改另一个链接的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！