html - 我可以同时激活所有子悬停状态吗？

Question

我希望有人能提供帮助。我正在尝试在一个 div 中创建一个带有背景图像的链接，并在另一个 div 中创建一个文本链接。我正在尝试为每个悬停状态创建悬停状态，一旦父悬停在上方，它们就会激活，目前我遇到了困难。到目前为止，我只设法激活了单个悬停状态。 关于如何解决问题的任何想法？甚至有可能吗？

<style>
.pf_block {
float:left;
width:33.33333333333333%;
background-color:#6f2788;
}

.pf_img_1 { 
width: 100%;
height: 313px;
background-image: url(http://kay-dee-emm.com/test/images/pf_vectors.jpg); 
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
}



.pf_title {
position:relative;
width: 95%;
padding:10px 0 10px 5%;
font: 28px /* 48px / 16px */ 'Quicksand', Arial, sans-serif;
color:#f7f56b;
}


.pf_img_1 {
transition:0.4s;
}


.pf_link_1 .pf_img_1:hover {
opacity:0.6;
}

.pf_link_1 pf_title:hover {
opacity:1;
color:#red;
}

</style>    
<a class="pf_link_1" href="">
<div class="pf_block">
<div class="pf_img_1"> </div>
<div class="pf_title">
    <p>
    Vectors
    </p>
</div>
</div></a>

Answer 1

您可以通过在父项而不是每个子项上指定 :hover 来执行此操作:

.pf_link_1:hover .pf_img_1 {
opacity:0.6;
}

.pf_link_1:hover .pf_title {
opacity:1;
color:red;
}

这仍然是两个独立的 CSS 规则，它们有自己的声明，但是将鼠标悬停在父级上将正确地同时激活这两个规则。