如何在懸停時更改另一個鏈接的顏色？

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

那么你的懸停鏈接將是藍色的，而所有其他鏈接（在這種情況下只是另一個）將是紅色的。