光标未悬停img元素即变为指针如何解决？需仅图片悬停时显示指针

这个问题我之前也碰到过，核心原因是<a>标签默认是行内元素，它的可交互区域（触发光标变为指针的范围）是它的文本流占据的空间，哪怕这个区域看起来和图片不重合，只要hover到<a>的范围内，光标就会变成指针。你给<a>设置宽高没效果，也是因为行内元素不支持width和height属性导致的。

下面给你两个实用的解决方案：

方案一：直接控制光标样式 #

把<a>标签的光标设为默认样式，只在hover图片时显示指针。这个方法最简单直接，不需要改变元素布局：

/* 重置a标签的光标为默认 */
a {
  cursor: default;
}

/* 保留你原来的图片样式 */
img {
  max-height: 89px;
  max-width: 100px;
}

/* 仅当hover图片时显示指针光标 */
img:hover {
  cursor: pointer;
}

方案二：让<a>标签的范围和图片完全重合 #

把<a>改成inline-block元素，这样就能设置宽高，再让它的尺寸和图片一致，同时清除默认的内边距和外边距，确保hover<a>就等于hover图片：

a {
  display: inline-block;
  padding: 0;
  margin: 0;
  /* 可选：如果图片和a还有微小偏移，加上这个对齐 */
  vertical-align: middle;
}

img {
  max-height: 89px;
  max-width: 100px;
}

/* 此时hover a就等同于hover图片 */
a:hover {
  cursor: pointer;
}

这两个方案都能解决你的问题，你可以根据自己的布局需求选择其中一个~

内容的提问来源于stack exchange，提问作者KATq