悬停在文本上,图像淡入淡出&出来
Hover Over Text, Image Fades In & Out
昨天,当我悬停在另一个链接上时,我得到了一些帮助,让图像淡出,但我很难弄清楚如何让它淡出。这可能涉及java?我很抱歉,因为我对更高级的编码(过去的基本CSS/HTML)还很陌生。
这是昨天有人给我的,它会很好地淡出,但我喜欢它在你从链接中删除鼠标后淡出。
img { opacity: 0; }
a:hover +img {
-webkit-animation: changeOpacity 5s;
animation: changeOpacity 5s;
}
@-webkit-keyframes changeOpacity {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Standard syntax */
@keyframes changeOpacity {
0% { opacity: 0; }
100% { opacity: 1; }
}
这就是HTML:
<a href="http://lorempixel.com/300/300/sports/1">
Hover the see Full image,click to go there
</a>
<img src="http://lorempixel.com/300/300/sports/1" width="200" height="200" />
<br>
<a href="http://lorempixel.com/300/300/sports/1">
Hover the see Full image,click to go there
</a>
<img src="http://lorempixel.com/300/300/sports/1" width="200" height="200" />
如有任何帮助,我们将不胜感激!
关键帧在这里被过度渲染了。您可以简单地使用transition
,然后根据需要更改opacity
值:
img {
opacity: 0;
transition: opacity 5s;
}
a:hover +img {
opacity: 1;
}
示例Fiddle
请注意,我在Fiddle中加快了过渡速度,因为在我的经验中,5秒对于渐变效果来说有点过分。
以下是我的操作方法:(直接在下面运行)
$('a').hover( function(){
$(this).parent().find('img').css('opacity',1)
}, function(){
$(this).parent().find('img').css('opacity',0)
});
img{
opacity : 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a href="http://lorempixel.com/300/300/sports/1">Hover the see Full image,click to go there</a> <br>
<img src="http://lorempixel.com/300/300/sports/1" width="200" height="200" />
</div>
<div>
<a href="http://lorempixel.com/300/300/sports/1">Hover the see Full image,click to go there</a><br>
<img src="http://lorempixel.com/300/300/sports/1" width="200" height="200" />
</div>
相关文章:
- jquery点击函数select&取消选择
- 音频控件在mouseover上显示,在mouseout上淡出
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- Angular js-返回一个包含类似
- 一点javascript元编程&可链接的设置器
- Javascript将图像src更改为淡入淡出
- css(或jQuery)悬停时淡入淡出
- 通过JSON&比较时间
- Jquery模板,如果xx&&如果yy
- 将淡入淡出添加到“我的身体背景滑块”
- jQuery工具验证器自定义效果-添加&消除影响
- Twitter引导程序Typeahead-Id&标签
- AngularJS&JSON-从Previous&下一个对象
- 如何设置淡出或超时以提醒成功&露天矿2.2中的警告框
- 悬停在文本上,图像淡入淡出&出来
- 淡入淡出&从另一个帧集中淡出对象
- FlexSlider淡入淡出动画在IE7&8.
- 淡入淡出&Out Interval Javascript
- 淡入淡出&输出间隔
- 如何制作发丹&Javascript中的淡出