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

【问题标题】：Can I activate all child hover states at the same time?我可以同时激活所有子悬停状态吗？
【发布时间】：2015-05-26 01:16:43
【问题描述】：

我希望有人可以提供帮助。我正在尝试创建一个链接，其中一个 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>

【问题讨论】：

您的问题代码中有几个拼写错误，即pf_title:hover 和#red。他们已在我的回答中得到纠正。

标签： html css hyperlink css-selectors hover

【解决方案1】：

您可以通过在父代而不是每个子代上指定 :hover 来做到这一点：

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

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

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

【讨论】：