如何讓整個組更改顏色懸停？

如果你去http://cascade2.hostei.com/collection.html 如何讓整個組更改顏色懸停？

而懸停在枝形吊燈的圖片上，你會發現整個組從灰色變成藍色。但是，如果您將鼠標懸停在其下方的標題上，您會注意到只有標題變爲藍色。

我該如何改變它，所以當我將鼠標懸停在標題上時，它也會將圖片的邊框變成藍色？最好使用HTML或CSS。

忽略陰影和所有其他錯誤。 HTML：

<center> 
<figure class=cheese> 
<a class=cheese href="images/cascadelucecatalog.pdf"> 
    <center><img src="images/cataloguefront.jpg" width="400" height="398" alt=""/> 
</center><figcaption> 
<h2><p>2013 Cascade Luce Catalog</p></h2></figcaption></a> 
     </figure></center>

CSS：

.cheese { 
    background-color: #4D4D4D; 
    -webkit-box-shadow: 1px 1px 15px #999999; 
    box-shadow: 1px 1px 15px #999999; 
    color: #FFF; 
} 
.cheese p{ 
    color: #FFF; 
} 
.cheese:hover, .cheese:active, .cheese:focus, .cheese :hover, .cheese :active, .cheese :focus{ 
    text-decoration: none; 
    background-color: #43A6CB; 
}

來源

2013-07-31 user2596430

的SO原則，這爲您顯示相關代碼或演示。請做。 – isherwood

您需要爲目標的IMG時.cheese盤旋。

.cheese:hover img { 
background-color: #43A6CB; 
}

來源

2013-07-31 18:43:15

非常感謝你......幫助我兩次在同一個網站上的同一頁.. – user2596430

哈哈沒問題 –

取消填充圖像。這掩蓋了背景。如果需要，將填充應用於父元素。

來源

2013-07-31 18:44:14 isherwood

你的圖像的背景顏色設置爲白色

figure img { 
padding: 10px; 
background-color: #FFFFFF; 
-webkit-box-shadow: 1px 1px 15px #999999; 
box-shadow: 1px 1px 15px #999999; 
}

只需卸下背景顏色：#FFFFFF;財產和一切應該正常工作。

它看起來相當好，白色的灰色邊框，以查看圖像在我看來也結束了。

來源

2013-07-31 18:44:29 T0ny

試試這個，瞄準IMG懸停

.cheese a img:hover { 
    background: blue; 
}

FIDDLE

來源

2013-07-31 18:50:21 feitla

如何讓整個組更改顏色懸停？

回答

相關問題