javascript - 翻转淡入 throw 错误

Question

我的目标是创建一个翻转文本显示小工具。当用户将鼠标悬停在图片上时，图片会淡化(不透明度会降低)，然后出现文本。当用户将鼠标悬停在图片之外时，它会切换回正常状态(图片的不透明度 = 1，文本消失)。

我测试了我的早期版本，将鼠标悬停在图片上时，我没有看到任何文字出现。我运行调试器并收到以下错误:

Uncaught TypeError: Object [object Object] has no method 'display' 

我在 JSFiddle 中复制了我的小元素.如果有人可以帮助我的文本出现并消除错误，将不胜感激。谢谢!

Answer 1

我认为您可以使用 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;
}