如何改变鼠标悬停的另一个链接的颜色?

This is the simple HTML code:

这是简单的HTML代码:

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

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

5 个解决方案

#1

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

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

If you use jQuery you could add the following script:

如果您使用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>

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

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

.hover { color: red; }

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

编辑它会更容易给出两个a的id，所以您可以通过使用var a1 = $('#a1')来引用它们;

#2

With CSS, it's possible to change the color of the 2nd anchor tag on hover of the 1st anchor tag with a sibling selector, but I don't think you can do it vice-versa:

有了CSS，就可以用一个兄弟选择器来改变第一个锚标记悬停的第二个锚标记的颜色，但我认为你不能反过来做:

a:hover + a {
    color: red;
}

JSFiddle preview: http://jsfiddle.net/9Ezt5/

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

See http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

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

However, note that adjacent sibling selectors are not supported on all browsers: http://www.quirksmode.org/css/contents.html

但是，请注意，在所有浏览器中都不支持相邻的同胞选择器:http://www.quirksmode.org/css/contents.html

#3

Yes you can do it with pure css.

是的，你可以用纯css。

for example:

例如:

a:hover + a{
 background:red;
}

Check this for more

检查这个更多

http://jsfiddle.net/Bw5by/

#4

In Jquery you can do it like this,

在Jquery中，你可以这样做，

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

See it in action here,

在这里，

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

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

#5

If those are the only two links in the list item tag, then you could do something like this:

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

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

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

Then your hovered link will be blue, and all the other ones (in this case just that other one) will be red.

然后你的悬垂链接将是蓝色的，而所有其他的(在本例中是另一个)将是红色的。