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

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