Question

我试图影响悬停时跨度的可见性当我将鼠标悬停在img上时，必须看到sqaure

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

并改变样式

function saveAsPdf() {
    var canvas = new fabric.Canvas('c', { selection: false});
    var customerId = getParameterByName("intCustomerId");
    var image = canvas.toDataURL();
    image = image.replace('data:image/png;base64,', '')
    var imgData = canvas.toDataURL('image/png');
    var doc = new jsPDF('p', 'mm');
    doc.save('sample-file.pdf');
}

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

中

Answer 2

你应该使用#timg:hover ~ #Square { ... } 结帐。

＆＃13;

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

＆＃13;

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

＆＃13;

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中的元素

3 个答案: