可点击的<article>背景颜色</article>

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

至于你的副作用问题，它可以双向工作，但是对于标签来说，它更适合于文章标签。

Answer 2

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

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

至于哪个更好，我认为这是一个意见问题。话虽这么说，锚标记是一个内联元素，因此如果你想使用有效的html，它不能包含一个块元素。