我有一个图像地图,当用户将鼠标悬停在地图上时,我想div
用关于悬停内容的信息淡入一个小的内容,然后在鼠标离开地图时会延迟两秒钟。
问问题
134 次
2 回答
2
可以通过使用 CSS 转换为不透明度设置动画来实现淡入淡出效果:
.small_div {
opacity: 0;
-webkit-transition: opacity 1s;
-ms-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.small_div.active {
opacity: 1
}
要使用这个类,您需要有一些 javascript 来.active
在图像地图悬停时添加该类并填充.small_div
必要的数据。
如果您不想使用类,则可以直接使用 javascript 更改 opacity 属性,并且该更改也将被动画化。
请注意,这在 IE8 等较旧的浏览器中不起作用,但应该可以正常降级。
于 2013-07-25T17:54:04.293 回答
0
与可空性建议不同,您可以仅使用包含延迟的 CSS 完全完成此操作,不涉及添加的类。这是一个证明它的小提琴
HTML:
<div id='map'>
<div id='overlay'></div>
</div>
CSS:
#map {
height:100px;
width:100px;
background:red;
}
#overlay {
z-index:2;
background:black;
height:100px;
width:100px;
opacity:0;
-webkit-transition: opacity 1s;
-ms-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
transition-delay: 2s;
-webkit-transition-delay: 2s;
}
#overlay:hover {
opacity:.8;
transition-delay: 0s;
-webkit-transition-delay: 0s;
}
于 2013-07-25T18:26:31.607 回答