javascript - 如何在悬停时更改另一个链接的颜色？

Question

这是简单的 HTML 代码:

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

是否可以在第一个 anchor 标记的悬停状态下更改第二个 anchor 标记的颜色？ (反之亦然。)

Answer 1

不适用于 css。这种 Action 只能​​通过脚本来完成。

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

<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>

现在您可以使用悬停类来指定颜色:

.hover { color: red; }

编辑 给两个 a 一个 id 会更容易，因此您可以使用 var a1 = $('#a1'); 来引用它们。