css - styling text within an article with hover - but link is on article element

Question

I'm designing a site, where I have elements with a link on them. I want this so that a visitor can click anywhere on the article to be linked to the page. The code I have is:

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

I want the text which says "Research" to have a purple background when people hover the article because this is what I have throughout all the text links on the site. I tried with CSS to style this using the class "pfcap

Answer 1

次のように書くことができます。

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

Answer 2

次の CSS が機能するはずです。

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