我可以同時激活所有兒童懸停狀態嗎？

我希望有人能幫忙。我正在嘗試在一個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>

來源

2015-05-25 KAY DEE EMM

您的問題代碼中有幾個拼寫錯誤，即'pf_title：hover'和'＃red'。他們已經在我的回答中得到糾正。 – BoltClock

您可以通過父，而不是每個孩子指定:hover做到這一點：

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

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

這些都還是用自己的聲明，兩個獨立的CSS規則，但懸停在家長會正確地激活這兩個規則同時。

來源

2015-05-25 17:00:59 BoltClock

謝謝！這工作完美！ –

我可以同時激活所有兒童懸停狀態嗎？

回答

相關問題