Question

* 好吧，以为我拥有它，但现在我没有。我正在尝试使用有机标签进行颜色链接，颜色不再在链接上工作，我的标签已停止工作，当我在示例中添加一个div标签时，我的页面布局变得混乱。有什么想法吗？ http://jsfiddle.net/kb0440/74vuX/ 。投资组合内容假设位于同一平原的侧边栏旁边。谢谢！

我想知道是否有人可以帮助我，我似乎无法弄明白。我试图通过我的列表获得此效果： http://digitalmash.com/ 当我将鼠标悬停在一个上面时，我希望所有其他链接变为灰色，我希望它们都像这样多彩。我正在尝试将它与有机标签js一起使用，而且我在这方面很新，所以试图搞清楚它刚刚让我的大脑变得糊涂了！任何帮助将不胜感激！

Answer 1

在这里： - ）

HTML：

<div>
<ul>
    <li class="first">Item 1</li>
    <li class="second">Item 2</li>
    <li class="third">Item 3</li>
    <li class="fourth">Item 4</li>
</ul>
</div>

CSS：

div ul:hover li {
    color:#CCC;
}
ul li.first, div ul li.first:hover {
    color:#F00;
}
ul li.second, div ul li.second:hover {
    color:#0F0;
}
ul li.third, div ul li.third:hover {
    color:#00F;
}
ul li.fourth, div ul li.fourth:hover {
    color:#0FA;
}

<强> Demo

Answer 2

有颜色：

.test:hover > div {    
    color: #777;
}

.blue, .test:hover > .blue:hover {
    color: blue;
}

.red, .test:hover > .red:hover {
    color: red;
}

.orange, .test:hover > .orange:hover {
    color: orange;
}

示例：http://jsfiddle.net/hunter/NqAWA/

Answer 3

许多方法都可以做到这一点。

以下是使用CSS3的内容：

<span>
<a id=a href=# title=AAA>AAAAA</a>
<a id=b href=# title=CCC>BBBBB</a>
<a id=c href=# title=CDDEZ>epupzotfrez eze</a>
</span>

span:hover a {color:grey;}
a {text-decoration:none; font-weight:bold;}
span:not(:hover) #a, #a:hover { color:red;}
span:not(:hover) #b, #b:hover { color:blue;}
span:not(:hover) #c, #c:hover { color:green;}

DEMONSTRATION

这是另一个使用javascript（这里有jquery，但你可以把它转换成香草）：

<span>
<a href=# title=AAA color=red>AAAAA</a>
<a href=# title=CCC color=blue>BBBBB</a>
<a href=# title=CDDEZ color=green>epupzotfrez eze</a>
</span>

a {text-decoration:none; font-weight:bold;}

function color() {
    $('a').each(function(){
        $(this).css('color', $(this).attr('color'));
    });
}
$('a').mouseenter(function(){
    $('a').css('color','grey');
    $(this).css('color', $(this).attr('color'));
});
$('span').mouseleave(color);
color();

第二种解决方案的一个优点是您不必在每个链接的css中输入一个条目。

DEMONSTRATION

使用css悬停在一个链接上时更改整个列表颜色

3 个答案: