當鼠標滑過圖片時，圖片會出現預覽的大圖，大圖下面還會有介紹文字。

.aa{

width:88px;

height :100px;

}

$(function () {

var x = 10;

var y = 20;

$("a.tooltip").mouseover(function (e) {

this.myTitle = this.title;

this.title = "";

var imgTitle = this.myTitle ? "
" + this.myTitle : "";

var tooltip = "

" + imgTitle + ""; //創建元素

$("body").append(tooltip); //將它追加到文本中

$("#tooltip")

.css({

"top": (e.pageY + y) + "px",

"left": (e.pageX + x) + "px"

}).show("fast"); //設置x坐標和y坐標，并且顯示

}).mouseout(function () {

this.title = this.myTitle;

$("#tooltip").remove(); //移除

}).mousemove(function (e) {

$("#tooltip")

.css({

"top": (e.pageY + y) + "px",

"left": (e.pageX + x) + "px"

});

});

})

總結

以上是生活随笔為你收集整理的php鼠标悬停显示图片,鼠标滑过出现预览的大图提示效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。