:hover 对 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;?>" />