html - 如何在悬停在不同div中的另一个图像上时显示图像

Question

我的目标是image Manager-icon.png在#watch #background #manager #logo将图像悬停blue-pointer.jpg在#watch #background #manager #logo.

我的 HTML 和 CSS 如下所示：

<div id="watch">
<div id="background">
    <img src="image/watch.jpg" height=100%>
    <div id="manager">
        <div id="pointer">
            <a href="login.html">
                <img src="Image/blue-pointer.jpg" width=100%>
            </a>
        </div>              
        <div id="logo">
            <img src="Image/Manager-icon.png" width=100%>           
        </div>
    </div>
</div>

#watch #background #manager #pointer{
    position: absolute;
    width: 100%;
    left: 28%;
    top: 79%;
}
#watch #background #manager #pointer img:hover + #watch #background #manager #logo img{
    display: inline;
}

#watch #background #manager #logo{
    position: absolute;
    width: 100%;
    top:35%;
}

#watch #background #manager #logo img{
    display: none;
}

Answer 1

+sign 指的是兄弟姐妹，因此，因为#pointer img甚至不接近 的兄弟姐妹#logo img，所以什么也没有发生。假设唯一的内容#pointer a是图像，唯一的内容#pointer是锚，你可以像这样做你的CSS：

#pointer:hover + #logo img {
    display: inline;
}

请注意一件事：您不需要编写整个 id 链。ID在整个网页中必须是唯一的，因此在 CSS 中引用它就足够了。你不必写这个

#watch #background #manager #pointer {
    ...
}

这完全够了

#pointer {
    ...
}