如何影响元素html中的元素

Question

我正试图影响悬停时跨度的可见性当我悬停在img上时，方形必须是可见的

<div class="headar_top">
        <a href=""><img id="timg"src="images/user.png"/></a>
        <a href="#sitemap"><img id="timg"src="images/sitemap.png"/></a>
        <span id="Square">
            <a href=""><button type="button" class="SquareButt">Log In</button></a>
            <a href=""><button type="button" class="SquareButt">Sign Up</button></a>
        </span>
    </div>
#timg:hover > #Square{
    visibility:visible;
}
#Square{
    margin-top:50px;
    height:80px;
    width:100px;
    background-color:#f3f603;
    float:right;
    margin-right:-145px;
    visibility:hidden;
}

但我仍然无法做出改变。

Answer 1

#square不是#timg的子级，因此直接子级选择器>不能像您预期的那样工作：将id移动到父链接

<a href="" id="timg"><img src="images/user.png"/></a>
<a href="#sitemap"><img id="timg"src="images/sitemap.png"/></a>
<span id="Square">
   <button type="button" class="SquareButt">Log In</button> 
   <button type="button" class="SquareButt">Sign Up</button> 
</span>

并像一样改变风格

#timg:hover ~ #Square { ... }

注意：按钮元素不能包含在链接中

Answer 2

您应该使用#timg:hover ~ #Square { ... } 签出这个。

#timg:hover ~#Square {
    display:block;
}
#Square{
    margin-top:50px;
    height:80px;
    width:100px;
    background-color:#f3f603;
    float:right;
    margin-right:145px;
    display:none;
}

<a href="" id="timg"><img src="images/user.png"/></a>
<a href="#sitemap"><img id="timg"src="images/sitemap.png"/></a>
<span id="Square">
   <button type="button" class="SquareButt">Log In</button> 
   <button type="button" class="SquareButt">Sign Up</button> 
</span>

Answer 3

.container {
    position: relative;
    float: left;
}
.container span {
       display:none;
   }
.container:hover span {
   display:block;
}

<div class="container">
    <img id="timg"src="images/user.png"/>
    <span>
 <a href=""><button type="button" class="SquareButt">Log In</button></a>
            <a href=""><button type="button" class="SquareButt">Sign Up</button></a>
</span>
</div>

请使用此代码，完美工作。