如何在不同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

+符号是指兄弟姐妹，因为#pointer img甚至不接近#logo img的兄弟姐妹，所以没有任何反应。假设#pointer a的唯一内容是图像，#pointer的唯一内容是锚点，您可以像这样执行CSS：

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

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

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

完全足够

#pointer {
    ...
}