Question

如果我有一个使用书签（命名链接）和普通链接的简单HTML和CSS文档，是否可以在其链接悬停时更改书签（例如，更改其颜色）。

例如，如果我有以下HTML

...
<a name="bookmark1">Bookmark One</a>
<a name="bookmark2">Bookmark Two</a>
<a name="bookmark3">Bookmark Three</a>
...
<a href="#bookmark1">Link to BM#1</a>
...

我可以按照以下方式编写CSS：

a:hover
{
    "the bookmark's color": red
}

会将书签的字体（而不是链接的）颜色更改为红色？也就是说，“Bookmark One”文本会改变颜色，而不是“Link to BM＃1”。

更新：感谢所有回答的人。总之，只使用CSS将鼠标悬停在链接上时，您似乎无法影响链接的目标。你需要求助于javascript。出于我的简单目的，我不想麻烦，所以我选择的答案只是CSS，但需要点击链接。

Answer 1

假设你的问题中的省略号暗示书签的位置，并且它们是链接的紧随其后的兄弟，你可以使用相邻兄弟选择器：

div:hover + div {
    color: blue;
}

JS Fiddle demo

参考：

adjacent-sibling selector (CSS2)。

Answer 2

这可以使用general sibling combinator完成，但源顺序必须不同，引用指定链接的链接必须位于命名链接之前，因为选择器定位于命名链接。

<a href="#bookmark1">Link to BM#1</a>
<a href="#bookmark2">Link to BM#2</a>

<a name="bookmark1">Bookmark One</a>
<a name="bookmark2">Bookmark Two</a>
<a name="bookmark3">Bookmark Three</a>

另一个问题是，由于CSS中没有变量或反向引用，因此必须为要执行此操作的每个链接显式创建一个CSS选择器。

a:hover[href="#bookmark1"] ~ a[name="bookmark1"],
a:hover[href="#bookmark2"] ~ a[name="bookmark2"] {
    color: red;
}

Example 1

您会在示例1中注意到“bookmark3”没有突出显示，因为没有引用它的规则。

更通用且更易于维护的方法是在点击链接而不是悬停时突出显示命名链接。您可以使用简单的:target选择器

执行此操作

a:target {
    color: red;
}

Example 2

如果你绝对认为它必须悬停并且不介意使用JavaScript，你可以用一点点jQuery做到这一点：

$('a[href^="#bookmark"]').hover(function() {
    // grab target of this link and remove the leading hash
    var name = $(this).attr('href').replace(/^.*#/, '');
    $('a[name="' + name + '"]').addClass('highlightedbookmark');
}, function() {
    // grab target of this link and remove the leading hash
    var name = $(this).attr('href').replace(/^.*#/, '');
    $('a[name="' + name + '"]').removeClass('highlightedbookmark');
});

Example 3

更好的是，此解决方案没有纯CSS方法所做的HTML源顺序限制：Example 4

Answer 3

您必须使用颜色标记来更改文本的颜色。如果你使用id或类，它也会更好。

a:hover{ 
    color:red;
 }

#bookmark a:hover{ 
    color:red;
 }

修改

如果要更改的文本与链接文本不同，那么您可以使用jQuery来执行此操作，例如：

$("#boomkark-link").hover( function(){ $("#bookmark").css('color', 'RED'); }

Answer 4

您可以将类指定给书签链接。请参阅以下示例：

<强> HTML

<a name="bookmark1" class="bookmark">Bookmark One</a>

<a href="#bookmark1">Link to BM#1</a>

<强> CSS

a:hover{
    color: red;
}

a.bookmark:hover{
    color: blue;
}

通过这种方式，您的普通链接将悬停RED（在此示例中），您的书签链接将悬停为蓝色。

Answer 5

使用属性选择器：

a[name]:hover {
    color: red;
}

Answer 6

@戴夫;也许你可以用简单的css declaration定义它。

.wrap1 a, .wrap2 a{
    background:green;
}
.wrap1 a:hover, .wrap2 a:hover{
    background:red;
}
a{background:yellow;}
a:hover{background:pink;}

如果链接位于不同的divs＆amp;您想要定位特定的a代码。检查这个以获取更多http://jsfiddle.net/sandeep/RsmAg/
修改可能nth-child也是一种选择。查看THIS

我可以使用CSS在其链接悬停时更改书签的属性吗？

6 个答案: