62.实现鼠标放在图片上自动放大效果
鼠标放在图片上自动放大，移开图片还原成原来大小
1 <template> 2 <div class="container"> 3 <img 4 class="image" 5 :class="{ zoomed: hovered }" 6 src="./path/to/your/image.jpg" 7 alt="Image" 8 @mouseover="hovered = true" 9 @mouseleave="hovered = false" 10 > 11 </div> 12 </template> 13 14 <script> 15 import { ref } from 'vue'; 16 17 export default { 18 name: 'App', 19 setup() { 20 const hovered = ref(false); 21 22 return { 23 hovered, 24 }; 25 }, 26 }; 27 </script> 28 29 <style scoped> 30 .container { 31 display: flex; 32 justify-content: center; 33 align-items: center; 34 height: 100vh; 35 } 36 37 .image { 38 transition: transform 0.3s; 39 } 40 41 .zoomed { 42 transform: scale(1.2); 43 } 44 </style>
放大前：
放大后：
