1

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

我想知道是否有人可以帮助我解决这个问题，我似乎无法弄清楚。我试图通过我的列表获得这种效果： http ://digitalmash.com/ 当我将鼠标悬停在一个链接上时，我希望所有其他链接都变灰，并且我希望它们都像那样丰富多彩。我正在尝试将它与有机标签 js 一起使用，而我对此很陌生，所以试图弄清楚它只是让我的大脑变得糊涂！任何帮助将非常感激！

4

3 回答 3

1

搭配颜色：

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

于 2012-10-02T15:14:42.267 回答
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;
}

演示

于 2012-10-02T15:09:21.177 回答
0

很多方法可以做到这一点。

这是一个使用 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;}

示范

​这 是另一个使用 javascript 的（这里使用 jquery，但您可以将其转换为 vanilla）：

<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 中为每个链接创建一个条目。

示范

于 2012-10-02T15:13:16.980 回答