[英]Rollover Fade In Throwing Errors
我的目标是创建一个过渡文本显示小工具。 当用户将鼠标悬停在图片上方时,图片会褪色(不透明度降低),然后出现文本。 当用户将鼠标悬停在图片之外时,它将切换回正常状态(照片的不透明度= 1,文本消失了)。
我测试了我的早期版本,将鼠标悬停在图片上时,没有看到任何文字出现。 我通过调试器,并遇到以下错误:
Uncaught TypeError: Object [object Object] has no method 'display'
我已经在JSFiddle中复制了我的小项目。 如果有人可以帮助我显示文本并消除错误,将不胜感激。 谢谢!
两件事情:
display
的函数 .hovertext
范围不是.hovertext
的子.pic
,因此$('.hovertext', $(this))
(其中$(this)
是图像之一$(this)
不会选择任何内容。 我认为您可以使用CSS3过渡来获得类似的效果: http : //jsfiddle.net/derekstory/bzf6L/1/
img {
position: absolute;
opacity:1;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
img:hover {
opacity : .2;
}
span {
font-family:Arial, Verdana, sans-serif;
}
.hovertext {
position: aboslute;
text-align:center;
}
您应该使用.fadeTo()
而不是.slideToggle()
,因为处于onhover
状态,它会自动切换:
$('.pic').hover(function() {
$(this).fadeTo(9);
//here is the place for the function to show the text.
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.