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

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;
}