<!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固定大小,鼠标划过图像放大
最新推荐文章于 2023-05-10 20:45:06 发布