<!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <meta charset="UTF-8"> <style> div { text-align: center; border: 1px solid #a1a1a1; width: 100px; height: 100px; border-radius: 15px; padding: 2px; overflow: hidden; } img { width: 100%; } .imgHover { width: 120%; position: relative; left: -10%; top: -10%; } .divHover { border: 2px solid darkorange; } </style> </head> <body> <div> <img src="ajax.jpg"> </div> </body> <script> $(document).ready(function () { $("div").mouseover(function () { $("img").addClass("imgHover"); $("div").addClass("divHover"); }); $("div").mouseleave(function () { $("img").removeClass("imgHover"); $("div").removeClass("divHover"); }); }); </script> </html>
div fixed size, mouse over the image to enlarge
Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=326698018&siteId=291194637
Recommended
Ranking