<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .relative { position: relative; } .box { margin: 0 auto; width: 500px; height: 200px; border: 1px dashed #808080; padding: 10px; } .box ul { list-style: none; display: inline-block; padding-left: 0; width: 30px; text-align: center; } .star li .hid1 { position: absolute; top: 25px; left: 16px; width: 21px; height: 21px; z-index: 10; opacity: 0; } .star li .hid2 { position: absolute; top: 25px; left: 50px; width: 21px; height: 21px; z-index: 10; opacity: 0; } .star li .hid3 { position: absolute; top: 25px; left: 84px; width: 21px; height: 21px; z-index: 10; opacity: 0; } .star li .hid4 { position: absolute; top: 25px; left: 119px; width: 21px; height: 21px; z-index: 10; opacity: 0; } .star li .hid5 { position: absolute; top: 25px; left: 152px; width: 21px; height: 21px; z-index: 10; opacity: 0; } .content { width: 200px; height: 30px; text-align: center; } .content ul { height: 30px; } .content li { width: 200px; display: inline-block; display: none; } </style> </head> <body> <div class="box relative"> <div class="star"> <ul> <li> <img class="show" src="img/123_看图王_01.png" /> <img class="hid1" src="img/123_看图王_04.png" /> </li> </ul> <ul> <li> <img class="show" src="img/123_看图王_01.png" /> <img class="hid2" src="img/123_看图王_04.png" /> </li> </ul> <ul> <li> <img class="show" src="img/123_看图王_01.png" /> <img class="hid3" src="img/123_看图王_04.png" /> </li> </ul> <ul> <li> <img class="show" src="img/123_看图王_01.png" /> <img class="hid4" src="img/123_看图王_04.png" /> </li> </ul> <ul> <li> <img class="show" src="img/123_看图王_01.png" /> <img class="hid5" src="img/123_看图王_04.png" /> </li> </ul> </div> <div class="content"> <ul> <li>非常差，回去再练练</li> <li>真的是差，都不忍心说你了</li> <li>一般，还说的过去</li> <li>很好</li> <li>完美</li> </ul> </div> </div> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(".box ul").hover(function() { //覆盖时 //星星 $(this).prevAll().find("li img").eq(1).stop(true).animate({ opacity: "1" }); $(this).prev().find("li img").eq(1).stop(true).animate({ opacity: "1" }); $(this).prev().prev().find("li img").eq(1).stop(true).animate({ opacity: "1" }); $(this).prev().prev().prev().find("li img").eq(1).stop(true).animate({ opacity: "1" }); $(this).find("li img").eq(1).stop(true).animate({ opacity: "1" }) //内容 var i = $(this).index(); //console.log(i); $(".content li").css("display", "none"); $(".content li").eq(i).css("display", "block"); }, function() { //离开时 //星星 $(this).find("li img").eq(1).stop(true).animate({ opacity: "0" }) $(this).prevAll().find("li img").eq(1).stop(true).animate({ opacity: "0" }); $(this).prev().find("li img").eq(1).stop(true).animate({ opacity: "0" }); $(this).prev().prev().find("li img").eq(1).stop(true).animate({ opacity: "0" }); $(this).prev().prev().prev().find("li img").eq(1).stop(true).animate({ opacity: "0" }); //内容 var i = $(this).index(); $(".content li").eq(i).css("display", "none"); }); </script> </body> </html>