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规则及其自己的声明，但将鼠标悬停在父节点上将同时正确激活这两个规则。

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

1 个答案: