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

Question

这是简单的HTML代码：

这是简单的HTML代码：

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

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

- RoyalEnfy

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类来指定颜色：

.hover { color: red; }

编辑 给两个a都加上一个id会更容易，这样你就可以通过使用var a1 = $('#a1');来引用它们。

- Kees C. Bakker

---

轻微错误：$(document).ready应为read。也可以简化为$(function() {。 - Hux

谢谢。我经常使用$(document).ready，但是我经常看到$(function() {。选择其中一个的依据是什么？ - Kees C. Bakker

我认为这纯粹是缩写的用法。我想这完全是个人喜好。 - Hux

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。

- David Hu

---

所有浏览器都不支持这个相邻选择器CSS。 - Gagandeep Singh

Answer 3

是的，您可以使用纯CSS实现它。

例如：

a:hover + a{
 background:red;
}

查看更多信息

http://jsfiddle.net/Bw5by/

- sandeep

---

但是这并不是相反的情况。 - David Hu

此“相邻选择器 CSS”在所有浏览器中均不受支持。 - Gagandeep Singh

很酷。哪些浏览器支持此功能？我能用第三或第五个连续出现的'a'实现吗？ - Kees C. Bakker

@KeesC.Bakker; 对于命中特定对象，您可以使用:nth-child伪元素，但在IE8及以下版本中不起作用。 - sandeep

@sandeep 反之呢？ - RoyalEnfy

Answer 4

在Jquery中，您可以这样做：

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

在这里看它的实际效果：

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

- Gagandeep Singh

---

如果你想在鼠标悬停时更改第一个的颜色，请将“first”替换为“second”。 - Gagandeep Singh

Answer 5

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

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

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

然后你的鼠标悬停链接将会变成蓝色，而其他所有链接（在这种情况下只有另一个）将会变成红色。

- Helen