html - 可点击背景颜色

Question

我正在（尝试）使用 HTML5/CSS3 设置一个简单的博客模板，帖子是使用标签的句柄。

我想让每个帖子都“可点击”，以便进入其“阅读更多”页面。我发现我可以将锚标签放在文章内部或外部：

<a href="#"> <article> .... </article> </a>

或者：

<article> <a href="#"> .... </a> </article>

两者似乎都有效（顺便说一句：哪种方式更可取？）。

我的问题是如何设置 CSS 以便当我悬停（可点击）帖子时背景颜色会改变？

在此先感谢，乔纳森

Answer 1

这应该工作：

article {
    background-color:red;
}

article:hover {
    background-color:blue;
}

JSFIDDLE

至于您的附带问题，它可以双向工作，但对于 seo 来说，将标签放在文章标签内会更好。

Answer 2

就主要问题而言：如果链接包含文章，您可以使用a:hover{background-color: red;}.

如果文章没有被包装，您可以使用article:hover{background-color: red;}.

至于哪个更可取，我认为这真的是一个见仁见智的问题。话虽如此，锚标记是内联元素，因此如果您希望使用有效的 html，则不能包含块元素。