使CSS悬停样式仅影响超链接

Question

When I define styles for hyperlinks , the "hover" style affects parts where the <a> tag is used only to define an ID, not a hyperlink, for example <a id="a1">TEXT</a> .

How can I get a hover style only for <a> tags that contain a hyperlink ?

Answer 1

You can use an attribute selector…

a[href]:hover {

}

… or define hover states for linked and visited links:

a:link:hover,
a:visited:hover {

}

---

You could also not use a elements for non-links .

Since the introduction of HTML 4 in the mid-1990s, any element can be a link target so long as it has an id.

<section id="a1">
    <h2>TEXT</h2>
    <p>More content</p>
</section>