[英]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.