gpt4 book ai didi

html - 无法弄清楚正确的悬停效果

转载 作者:行者123 更新时间:2023-11-28 01:56:14 25 4
gpt4 key购买 nike

我在我的页面上制作了 3 个按钮来显示 img。我希望当人们通过 HTML、CSS 或 JS & Jquery 按钮时显示图像。但问题是,当您将鼠标悬停在图像上时(您还看不到),您也可以看到它。

这是我使用它的网站:My School Report.

当您越过领带时,会出现一个框。向下滚动,您可以看到按钮。

这是我用于其中一个按钮的 HTML 代码:

<div id="vlek4">
<div id="jsandjq"><img src="img/js&jq.png" width="576" height="104" /></div>
</div>

这是我用于其中一个按钮的 css 代码:

#vlek4{
background-image:url(../img/vlek4.png);
background-repeat:no-repeat;
position:absolute;
top:980px;
left:600px;
width:163px;
height:113px;

-webkit-transition-duration: 1.2s;
-moz-transition-duration: 1.2s;
-o-transition-duration: 1.2s;
transition-duration: 1.2s;
}

#vlek4:hover{
position:absolute;
left:542px;
width:;
height:;
}

#vlek4 #jsandjq{
position:absolute;
top:150px;
left:-460px;
width:163px;
height:113px;
opacity:0;
}

#vlek4:hover #jsandjq{
position:absolute;
top:150px;
left:-460px;
width:163px;
height:113px;

opacity:1;

-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}

#vlek4:hover #jsandjq:hover img{
display:none;
visibility:hidden;}

Vlek4 代表 JS & Jquery 按钮。jsandjq 代表显示的图像。

有人知道我在这里做错了什么吗?问题出现在 Chrome 中。

谢谢!

最佳答案

那是因为您正在为整个 div 编写悬停效果,其中还包括隐藏图像。

将图像放在悬停 div 之外。

<div id="vlek1">
<div id="html"> <img src="img/html.png" width="576" height="104"> <!--Place this outside of the parent div--></div>
</div>


方法二

代替 opacity 使用 visibility 。在这种情况下,您无需更改 HTML。

DEMO here (滚动到输出面板的底部)


.vierkant div 更改为 .vierkant > div 因为它指向 .vierkant 中的所有 div,所以过渡效果会发生冲突所以让它只用于 .vierkant

的第一个 div

DEMO 2

关于html - 无法弄清楚正确的悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16811582/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com