<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; width: 390px; height: 220px; } ul li { width: 390px; height: 220px; border: 1px solid orange; } ul li img { width: 384px; height: 214px; } .opacity_li { opacity: 0.5; } div img { width: 608px; height: 424px; } </style> <script src="js/jquery-1.11.3.min.js"></script> <script> $(function() { $("ul li").hover(function() { // over //鼠标移入当前列透明度为1 其他列为0.5 //$(this).css("opaacity", "1").siblings("li").addClass("opacity_li"); var $imgsrc = $(this).find("img").attr("src"); var $div = "<div><img src='" + $imgsrc + "'/></div>"; $("body").append($div); $("div img").attr("src", $imgsrc); }, function() { // out //鼠标移出的时候把其他列透明度去掉 //$(this).siblings().removeClass("opacity_li"); $("div").remove(); }).mousemove(function(e) { $("div").css({ position: "absolute", left: e.pageX + 10, top: e.pageY + 10 }); //设置div绝对定位 坐标就是距离鼠标当前的位置 });; }) </script> </head> <body> <ul> <li> <img src="images/问奈何.png" alt="" /> </li> <li> <img src="images/夏承凛.png" alt="" /> </li> <li> <img src="images/怀璧明罪问奈何.png" alt="" /> </li> </ul> </body> </html>