悬停时:用一种颜色突出显示维基百科的所有相同链接,用不同的颜色突出显示其他地方的所有相同的链接

On hover: higlight all identical links to Wikipedia in one colour, highlight all identical links elswhere in a different color

本文关键字:颜色 显示 链接 其他 一种 悬停 百科      更新时间:2023-09-26

我试图在悬停时突出显示维基百科的所有相同链接蓝色,而在悬停时,其他所有相同链接都会突出显示绿色

在维基百科部分,我使用了以下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;
}