悬停时:用一种颜色突出显示维基百科的所有相同链接,用不同的颜色突出显示其他地方的所有相同的链接
On hover: higlight all identical links to Wikipedia in one colour, highlight all identical links elswhere in a different color
我试图在悬停时突出显示维基百科的所有相同链接蓝色,而在悬停时,其他所有相同链接都会突出显示绿色。
在维基百科部分,我使用了以下jQuery代码:
$(function () {
function getKey(element) {
return element.href;}
function sameGroupAs(element) {
var key = getKey(element);
return function () {
return getKey(this) === key;}}
$(document)
.on("mouseenter", "a[href*=wikipedia]", function () {
$("a").filter(sameGroupAs(this)).addClass("wikipedia");})
.on("mouseleave", "a", function () {
$("a").filter(sameGroupAs(this)).removeClass("wikipedia");});});
a.wikipedia{background-color: #A8c5ff}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Wikipedia: <a href="http://en.wikipedia.org/wiki/Experiential_learning">experiential learning</a>. And all <b>identical</b> links get higlighted at the same time. E.g.: the next occurence <a href="http://en.wikipedia.org/wiki/Experiential_learning">experiential learning</a> gets highlighted simultaneously.
至于非维基百科页面悬停时的绿色指示灯,我仍在挣扎。
到目前为止,我已经尝试过:
你可能会笑得很开心,因为我经验不足,但我会努力展示我被卡住的地方:
我试图再次复制代码,现在指定一个额外的条件。。。例如,尝试使用jQuery :not()
-选择器例如,检查维基百科类的否定是否适用,
$( "a[href]:not(:contains('wikipedia'))" ).css( "color", "green" );
或者我尝试过类似的东西:
"a:not([href*=wikipedia])"
或者添加if
维基百科?->{nothing}else
{green}-statement.
if(!$(this).hasClass("wikipedia")){;
无}
else{addClass("green");}
我尝试过的另一个选项(也没有成功,因为维基百科部分被否决了,而我只想让维基百科部分优先考虑):
- 复制代码,用
"a"
替换"a[href*=wikipedia]"
,并为绿色添加一个类。然后,如果维基百科的部分能够将自己强加给一般的"a"
,那么就会达到预期的结果
如有任何帮助,我们将不胜感激(正如您所注意到的,来自这位初学者)。
您可以通过CSS属性选择器的组合和重新使用现有函数来实现这一点,但要使它们更通用。
演示
JavaScript:
function getKey(element) {
return element.href;
}
function sameGroupAs(element) {
var key = getKey(element);
return function () {
return getKey(this) === key;
}
}
$(document).on("mouseenter", "a", function () {
$("a").filter(sameGroupAs(this)).addClass("active");
}).on("mouseleave", "a", function () {
$("a").filter(sameGroupAs(this)).removeClass("active");
});
然后是CSS:
a[href*="wikipedia"].active {
background:red;
}
a:not([href*="wikipedia"]).active {
background:green;
}
相关文章:
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 高亮显示时编辑文本大小和颜色
- 当鼠标悬停在不同颜色上时,传单突出显示标记
- 显示所选随机颜色的十六进制
- Javascript用颜色突出显示所有排除的字符
- 在OpenStreetMap上显示不同的文本标记或颜色标记
- 如何在高亮显示时更改文本颜色
- 一次高亮显示一个城市,并在悬停其他城市时删除颜色填充
- 悬停时:用一种颜色突出显示维基百科的所有相同链接,用不同的颜色突出显示其他地方的所有相同的链接
- 昼夜热图-不显示颜色
- 我正在使用jQuery图片库以各种颜色显示相同的产品.我想在点击时更改动画
- 用颜色显示字符
- 导航栏/菜单未使用Safari以自定义颜色显示(其他浏览器中的正确颜色)
- 如何使用JavaScript在网页上以不同颜色显示英语和波斯语单词
- linearGradient以一种颜色显示
- 在javascript中获取颜色显示配置文件
- 如果在数组中找到,如何以不同的颜色显示名称
- IE7选择选项文本颜色显示不正确
- Google Maps JavaScript API -用一种颜色显示未激活的替代路由,用另一种颜色显示激活的替代路由
- 如何在高图表中以不同的颜色显示我的标签和每个x轴的完整日期