如何改变悬停时另一个链接的颜色

How to change the color of another link on hover?

本文关键字：另一个 链接 颜色 悬停 何改变 改变      更新时间：2023-09-26

这是简单的HTML代码:

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

是否可以在第一个锚标签的悬停状态下改变第二个锚标签的颜色?(反之亦然)

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

如果你使用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');来引用它们。

使用CSS，可以使用兄弟选择器在第一个锚标记的悬停位置更改第二个锚标记的颜色，但我不认为你可以反过来做:

a:hover + a {
    color: red;
}

JSFiddle预览:http://jsfiddle.net/9Ezt5/

看到http://www.w3.org/TR/CSS2/selector.html相邻选择器

但是，请注意并非所有浏览器都支持相邻的兄弟选择器:http://www.quirksmode.org/css/contents.html

是的，你可以用纯css。

例如:

a:hover + a{
 background:red;
}

查看更多

http://jsfiddle.net/Bw5by/

在Jquery中你可以这样做，

$("#first").hover(function(){
    $('#second').css('color','red')
    },function(){
    $('#second').css('color','blue')
    });

在这里看到它的作用，

http://jsfiddle.net/gagan/NYAHY/1/

如果这是列表项标签中仅有的两个链接，那么您可以这样做:

li.main:hover a
{
    color: red;
}
li.main a:hover
{
    color: blue;
}

那么你的悬停链接将是蓝色的，所有其他的(在这种情况下，只是另一个)将是红色的

相关文章：