首先,我必须更正您的 HTML。A div
(块级元素)不是aspan
或a
元素(两者都是行内元素)的有效子元素。因此,将您的 HTML 修改为以下内容:
<span class="row_1">
<a href="#">
<span class="caption">testing</span>
<img class="img_link" src="http://davidrhysthomas.co.uk/img/dexter.png" />
</a>
</span>
也就是说,如果可能的话,我建议为此使用纯 CSS:
a {
display: inline-block;
position: relative;
}
.caption {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: #333; /* for browsers that don't understand rgba() notation */
background-color: rgba(0,0,0,0.6);
color: #f90;
font-weight: bold;
line-height: 1.1em;
}
a:hover .caption {
display: block;
}
JS 小提琴演示。
您甚至可以使用 CSS3 转换,甚至实现淡入转换(对于那些不理解/实现转换的浏览器,它会优雅地降级,尽管在此示例中,您可能必须使用 Microsoft 专有过滤器来满足旧版 IE 合规性):
a {
display: inline-block;
position: relative;
}
.caption {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: #333; /* for browsers that don't understand rgba() notation */
background-color: rgba(0,0,0,0.6);
color: #f90;
font-weight: bold;
line-height: 1.1em;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-ms-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}
a:hover .caption {
opacity: 1;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-ms-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}
JS 小提琴演示。
如果您必须使用 jQuery,那么我建议您保持非常非常简单:
$('.row_1 a').hover(
function(){
$(this).find('.caption').fadeIn(1000);
},
function(){
$(this).find('.caption').fadeOut(1000);
});
JS 小提琴演示。
参考: