[英]How to make info text appear and follow the cursor when hovering over image?
[英]How to make text appear on top of the image when hovering?
当鼠标悬停在图像上方时,图像将变得模糊,并且图像上方会显示文本。 我自己使用下面的代码尝试了此操作,但悬停时似乎“文本”移到了图像的外面……有人能告诉我为什么吗?
码:
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;
}
jQuery:
$('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
(块级元素) 不是或者是一个有效的子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;
}
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小提琴演示 。
参考文献:
transition
。 fadeIn()
。 fadeOut()
。 find()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.