防止伪元素内容在悬停时更改颜色

当我将鼠标悬停在链接“EN | FR”上时，所有字符（包括管道字符'| '将颜色更改为蓝色。防止伪元素内容在悬停时更改颜色

a:hover { 
 
    color: blue; 
 
} 
 
a.language { 
 
    display: inline; 
 
    padding: 0; 
 
} 
 
a.language:last-child:before { 
 
    content: ' | '; 
 
}

<a class="language" href="/en">EN</a> 
 
<a class="language" href="/fr">FR</a>

我想实现，只有链接EN和FR变成蓝色鼠标除了管道字符'的颜色| '就是在他们之间。

我在寻找类似：

a.language:last-child:before:hover { 
    color: grey; 
}

保持竖线“| '灰色。

我该如何做到这一点？

UPDATE：

感谢Paulie_D我有一个工作JSfiddle solution

来源

2016-09-29 StandardNerd

您只需将管道直接放入两个锚标记之间的HTML中即可。如果你这样做，管道将被加下划线，并且它也将是可点击的（导致法语href）。 – APAD1

是的，这是简单的方法。但列表项是动态生成的，我不能修改HTML，所以我必须用CSS来做。 – StandardNerd

你接近：

a.language:last-child:hover::before { 
    color: red; 
}

JSfiddle Demo

，或直接申报伪元素的颜色，让特别为你赢得胜利。

a.language:last-child::before { 
    content: ' | '; 
    color:red; 
}

JSfiddle Demo

来源

2016-09-29 14:23:05

非常感谢Paulie_D，我更新了你的JSfiddle Demo以更符合我的用例：https://jsfiddle.net/qzfrx0wy/ – StandardNerd

我会简单地插入管道字符的链接之间的常规字符，而不是有任何的CSS规则：

<a class="language" href="/en">EN</a> | <a class="language" href="/fr">FR</a>

来源

2016-09-29 14:27:27 Johannes

是的，这是简单的方法。但列表项是动态生成的，我不能修改HTML，所以我必须用CSS来做。 – StandardNerd

只需添加你想要的颜色现有::before声明：

a.language:last-child::before { 
     content: ' | '; 
     color: gray; 
}

jsFiddle

来源

2016-09-29 14:28:00

防止伪元素内容在悬停时更改颜色

回答

相关问题