如何影响元素 html 内的元素

Question

我正在尝试影响悬停时跨度的可见性当我将鼠标悬停在 img 上时，square 必须可见

<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 的 child，因此直接 children 选择器 > 不能像您预期的那样工作：移动而不是 id 到 parent link

<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 { ... }

注意：按钮元素不能包含在 link

中

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>

请使用此代码，完美运行。

如何影响元素 html 内的元素

how to affect on an element inside element html

html

css

hover