Jquery中的img文字提示是一種很常用的交互效果,它可以讓用戶在鼠標hover到圖片時,顯示一段自定義的文字或者一張圖片作為提示。可以極大地提高網站的用戶體驗。

//html中的圖片標簽
<img src="example.jpg" alt="example">
//jquery中的img文字提示
$('img').mouseover(function(){
var title = $(this).attr('alt'); //獲取圖片的alt屬性
$(this).after('<span>' + title + '</span>'); //在圖片后面添加一個提示框
$('span').css({'position':'absolute', 'left':'0', 'top':'0', 'color':'white', 'background':'black'}); //給提示框添加CSS樣式
}).mouseout(function(){
$('span').remove(); //鼠標移出圖片時，移除提示框
});

上面的代碼使用了Jquery的鼠標懸停事件和DOM操作，獲取了圖片的alt屬性，并且在圖片后面添加了一個span標簽來作為提示框，并添加了樣式。

如果想要顯示一張圖片作為提示，可以將代碼中的$('span')換成$('img')，并設置src屬性為提示圖片的地址。

//jquery中的img圖片提示
$('img').mouseover(function(){
var src = 'example_tip.jpg'; //提示圖片的地址
$(this).after('<img src="' + src + '">') //在圖片后面添加一個提示圖片
}).mouseout(function(){
$('img').remove(); //鼠標移出圖片時，移除提示圖片
});

這樣，當鼠標懸停在圖片上時，就會出現一個自定義的提示語或者一張提示圖片。