2

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

这是我使用它的网站：我的学校报告。

当您克服平局时，会出现一个框。向下滚动，您可以看到按钮。

这是我用于其中 1 个按钮的 HTML 代码：

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

这是我用于 1 个按钮的 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 中。

谢谢！

4

1 回答 1

1

那是因为您正在为整个 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，因此会发生冲突，因此仅适用于第一个 div.vierkant

演示 2

于 2013-05-29T10:41:07.463 回答