:懸停在 Div 之外的對象上的效果（CSS/JS？）

Question

我有一個 CSS 懸停效果，當您將鼠標懸停在初始圖像上時，它會在兩個圖像之間循環。

HTML：

<img class="bottom" src="photos/800_800_<?php echo $r->image1;?>" />
<img class="top" src="photos/800_800_<?php echo $r->image2;?>" />

CSS：

#cf img {
    position: absolute;
    left: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
    opacity: 0;
}

我該如何做到這一點，以便當您將鼠標懸停在 ID 為 #cf 的 div 之外的標簽上時，它會觸發相同的效果？

Answer 1

您沒有添加樣式 id，您必須在 img 標簽中添加 id 嘗試以下代碼。

<img id="cf" class="bottom" src="photos/800_800_<?php echo $r->image1;?>" />