css - 使用悬停在文章中设置文本样式 - 但链接在文章元素上

Question

我正在设计一个网站，其中有带有链接的元素。我希望这样做，以便访问者可以单击文章上的任意位置以链接到该页面。我的代码是：

<article class="pfitem"><a href="research.php">
<img class="pfcover" src="Images/pfresearch.png" />
<p class="pfcaption">Research Papers</p>
</a></article>

当人们将文章悬停时，我希望显示“研究”的文本具有紫色背景，因为这是我在网站上所有文本链接中所拥有的。我尝试使用 CSS 来使用类“pfcap”来设置它的样式

Answer 1

你可以这样写：

.pfitem:hover a .pfcaption{
 background:red;
}

Answer 2

以下 CSS 应该可以工作：

.pfcaption:hover {
    background-color: #d9f;
}