:hover effect on object out of Div (CSS/JS?)

Question

I have a CSS hover effect that cycles between two images when you hover over the initial image.

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;
}

How can I make it so that when you hover over a tag that isn't in the div with the ID of #cf it triggers the same effect?

Answer 1

您没有添加样式 id，您必须在 img 标签中添加 id 尝试以下代码。

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