Question

这是简单的HTML代码：

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

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

Answer 1

不是用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');来引用它们。

Answer 2

使用CSS，可以使用兄弟选择器更改第一个锚标记悬停时第二个锚标记的颜色，但我认为你不能这样做反之亦然：

a:hover + a {
    color: red;
}

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

请参阅http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

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

Answer 3

是的，你可以用纯css做到这一点。

例如：

a:hover + a{
 background:red;
}

查看此内容以获取更多信息

http://jsfiddle.net/Bw5by/

Answer 4

在Jquery中你可以这样做，

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

在这里看到它，

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

Answer 5

如果这些是列表项标签中唯一的两个链接，那么你可以这样做：

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

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

然后您的悬停链接将为蓝色，而所有其他链接（在这种情况下只是另一个）将为红色。

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

5 个答案:

http://jsfiddle.net/Bw5by/