利用css和js分别实现鼠标移入文字图片放大缩小效果 写出具体例子

利用CSS和JavaScript可以创建动态的图像缩放效果，当鼠标悬停在文字上方时图片会放大，离开则恢复原大小。这里是一个简单的示例：

首先，HTML部分:

<div class="image-container">
  <img src="your-image-url.jpg" alt="Image" class="zoom-image">
  <p>这是文字描述</p>
</div>

CSS部分，设置基础样式和过渡效果：

.image-container {
  position: relative;
}

.zoom-image {
  width: 100px; /* 设置初始图片宽度 */
  transition: transform 0.5s ease; /* 添加平滑过渡效果 */
}

.zoom-image:hover {
  transform: scale(1.2); /* 当鼠标悬停时，放大图片 */
}

JavaScript部分，通常情况下CSS已经足够处理这个效果，但如果需要更复杂的交互或浏览器兼容性考虑，可以添加一些额外的事件监听：

// 如果你想在无CSS支持的旧浏览器中提供额外的支持
const img = document.querySelector('.zoom-image');
img.addEventListener('mouseover', function() {
  this.style.transform = 'scale(1.2)';
});
img.addEventListener('mouseout', function() {
  this.style.transform = '';
});