html图片鼠标

图片鼠标悬停效果实现方法

基础鼠标指针样式修改

通过CSS的cursor属性改变鼠标悬停时的指针样式，提升交互体验。

<style>
  .hover-pointer img {
    cursor: pointer; / 鼠标变为手型 /
  }
</style>
<div class="hover-pointer">
  <img src="example.jpg" alt="示例图片">
</div>

图片悬停样式变化

使用:hover伪类实现颜色、阴影等视觉反馈。

.image-hover img:hover {
  box-shadow: 0 0 15px rgba(0,0,0,0.3); / 添加阴影 /
  transition: transform 0.3s; / 过渡动画 /
}
.image-hover img:hover {
  transform: scale(1.05); / 放大效果 /
}

图片替换悬停效果

通过CSS切换不同图片实现鼠标悬停时的图片替换。

<style>
  .swap-image {
    position: relative;
  }
  .swap-image img {
    width: 100%;
    display: block;
  }
  .swap-image:hover .default-img {
    display: none;
  }
  .swap-image:hover .hover-img {
    display: block;
  }
</style>
<div class="swap-image">
  <img src="default.jpg" alt="默认图片" class="default-img">
  <img src="hover.jpg" alt="悬停图片" class="hover-img" style="display:none;">
</div>

提示（结合title属性）

在鼠标悬停时显示自定义标题文字。

<div class="tooltip-image">
  <img src="example.jpg" alt="示例图片" title="点击查看大图">
</div>

效果对比表

相关问题与解答

Q1：如何让图片悬停效果兼容IE6-IE8？
A1：需使用JavaScript监听onmouseover和onmouseout事件，

var img = document.getElementById('myImage');
img.onmouseover = function() {
  this.style.border = '5px solid #ccc'; // IE低版本兼容写法
};
img.onmouseout = function() {
  this.style.border = '';
};

Q2：能否仅用纯CSS实现图片旋转悬停效果？
A2：可以，通过transform属性配合transition：

.rotate-hover img:hover {
  transform: rotate(15deg); / 顺时针旋转15度 /
  transition: transform 0.5s ease-in-out; / 平滑过渡 /
}