为pointer-events:none的按钮内img标签设置不同title的实现方法

嘿，这个问题的核心是pointer-events:none会让按钮及其所有子元素都无法响应鼠标事件——包括触发title提示的hover动作。不过咱们可以通过给每张图片单独重置这个属性来解决：

具体实现代码 #

<button style="pointer-events:none"> 
  <img src="your-first-image-url" title="this should enabled" style="pointer-events:auto"/> 
  <img src="your-second-image-url" title="some should be disabled" style="pointer-events:auto"/> 
</button>

原理说明 #

• 按钮的pointer-events:none依然生效，保证按钮本身无法被点击或触发任何鼠标交互；
• 给每张img设置pointer-events:auto，让它们重新获得接收鼠标事件的能力，这样hover时就能正常显示各自的title文本了。

如果需要更清晰的样式管理，也可以把样式抽离到CSS类里，比如：

.disabled-button {
  pointer-events: none;
}
.button-img {
  pointer-events: auto;
}

对应的HTML：

<button class="disabled-button"> 
  <img class="button-img" src="your-first-image-url" title="this should enabled"/> 
  <img class="button-img" src="your-second-image-url" title="some should be disabled"/> 
</button>

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