如何從圖形繼承顏色屬性到 figcaptions

Question

當我用鼠標在 hover 上方時，我正在嘗試制作一個改變包含圖像的背景顏色的圖形。 我能夠做同樣多的事情，然后嘗試使用 class 更改標題和背景的顏色，然后嘗試將 go 提升一個級別，但是當我 hover 在圖像上不完全正常工作時。

我試圖做的是將 class 與圖中的背景和文本顏色一起放置，並認為它只會使標題繼承文本顏色，但這並沒有發生。

或者，我也嘗試為標題賦予其自己的 hover 屬性，它確實有效，但不正確。

你看我是否給圖形一個背景顏色和文本顏色，然后只有背景改變顏色，如下所示

懸停前 懸停后

文本仍然是藍色的，我把它寫成白色的。

當我直接在標題上應用代碼時，就會發生這種情況

不懸停在標題上 懸停在標題上時

如您所見，標題僅在我的 cursor 位於其上時亮起，但我希望它在我的 cursor 懸停在圖像的任何部分上時亮起，所以我真正想知道的是，如果有的話一種方法來做到這一點，任何幫助都會非常有幫助。

這是我用於此的代碼

figcaption {
    color: #3a7cc4;
}

.change {
    box-shadow: 0px 0px 30px lightgray;
    transition: all 0.2s linear;
}

.change:hover{
    background-color: #3a7cc4;
    transition: all 0.2s linear;
    color: white;
}

然后我分別更改了標題顏色，以使其更改顏色

figcaption:hover {
    color: white;
}

編輯-

這是代碼的工作片段：

 .change { box-shadow: 0px 0px 30px lightgray; transition: all 0.2s ease-in; }.change:hover { background-color: #3a7cc4; transition: all 0.2s ease-in; color: white; } figcaption:hover { color: white; }

 <div class="column change"> <figure> <img src="https://i.imgur.com/N7vSN08.jpeg"> <figcaption>Tree Fort</figcaption> </figure> </div>

Answer 1

假設它是有變化的圖形 class 那么它可以設置文本的顏色並且它可以被標題繼承。

在問題中給出的 CSS 中，figcaption 通過設置它本身來覆蓋任何繼承的顏色。 因此，當圖形懸停時它不會改變。

所以這個片段刪除了它，而是在圖中放置了藍色設置。 當沒有懸停時，它會被繼承。 當懸停顏色設置時，白色會被繼承。

 <style>.change { box-shadow: 0px 0px 30px lightgray; transition: all 0.2s linear; color: #3a7cc4; }.change:hover { background-color: #3a7cc4; transition: all 0.2s linear; color: white; } </style> <figure class="aligncenter size-full change"><img loading="lazy" width="477" height="587" src="https://cid17970jan2022.kinsta.cloud/wp-content/uploads/2022/01/image.jpg" alt="" class="wp-image-6889" srcset="https://cid17970jan2022.kinsta.cloud/wp-content/uploads/2022/01/image.jpg 477w, https://cid17970jan2022.kinsta.cloud/wp-content/uploads/2022/01/image-244x300.jpg" sizes="(max-width: 477px) 100vw, 477px"> <figcaption>Tree Fort</figcaption> </figure>

注意：如果它是一個祖先元素而不是具有更改 class 的圖形，則 CSS 選擇器將需要更改為.change figure