[英]How do you overlay a div over an img, and show another div onmouseover?
我有一個列表縮略圖,單擊該縮略圖會導致較大的副本。 我想在縮略圖的底部邊緣的div中顯示圖像標題。 同樣,當鼠標移到縮略圖上時,它會在整個對象上顯示一個2格(包含文本)。
最好的方法是什么? 如果需要js庫,則首選jquery。
<div>
<img id="image-1" src="yourimage.png" title="My title" />
<p id="image-1-title"></p>
</div>
$(document).ready(function(){
$("img[id^='image-']").each(function(i){
var id = $(this).attr("id");
var title = $(this).attr("title");
$("#"+id+"-title").html(title);
});
});
這應該為圖像標題做:)
我前段時間寫了一個小插件,可以讓您做自己需要的事情,並且在懸停時帶有動畫。 它最初是用來添加懸停背景動畫的,但是我想它應該能夠滿足您的需求。
/*
* jQuery Animate Background (v0.2)
* Copyright (c) 2009 Mario "Kuroir" Ricalde ( http://twitter.com/exolimpo )
* Usage:
* $("h1").animateBg();
* Con Campos Opcionales:
* $("div").animateBg({time:130,add:"span"});
*/
(function($){
$.fn.animateBg = function(opciones){
$.fn.animateBg.defecto = {
time : "fast", add : "span"
};
var config = $.extend({}, $.fn.animateBg.defecto, opciones);
this.each(function(){
var c = config;
var title = $(this).attr("title");
$(this).append("<"+ c.add +">" + title + "</"+ c.add +">").hover(function(){
$(this).children(c.add).fadeIn(c.time);
},function(){
$(this).children(c.add).fadeOut(c.time);
});
});
}
})(jQuery);
$(document).ready(function(){
$("#thumb-list p img").animateBg();
});
<div id="thumb-list">
<p><img src="lol.jpg" title="My title" /></p>
</div>
抱歉,如果代碼無法正常工作,因為我不在家,所以無法測試。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.