当鼠标悬停在图片上时,图片会变模糊,图片上方会出现文字。我自己使用下面的代码进行了尝试,但是当鼠标悬停时,“文本”似乎移到了图像之外 ...谁能告诉我为什么?
代码:
HTML:
<span class ="row_1">
<a href="#">
<div class = "caption"> testing </div>
<img class = "img_link" src="image/food/food1.jpg" />
</a>
</span>
CSS:
.caption
{
display: none;
}
J查询:
$('a').hover(
function(){
var image = $(this).find('img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.fadeIn();
},
function(){
var image= $(this).find('img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.fadeOut();
});
最佳答案
首先,我必须更正您的 HTML。 div
( block 级元素)不是 span
或 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;
}
使用 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;
}
如果您必须使用 jQuery,那么我建议保持它非常非常简单:
$('.row_1 a').hover(
function(){
$(this).find('.caption').fadeIn(1000);
},
function(){
$(this).find('.caption').fadeOut(1000);
});
引用资料:
- > CSS
transition
. - >
fadeIn()
. - >
fadeOut()
. - >
find()
.
关于javascript - 悬停时如何使文本出现在图像顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10180791/