某个周五上午，我满怀愉悦地走进办公室，期待着即将到来的周末。工作中的每一分钟都让我心情愉快，我迫不及待地等待下班的时刻，与家人和朋友共度美好时光。
然而，就在这个充满喜悦的时刻，一个小小的bug打破了我的宁静。我收到了一个来自同事的报告，描述了一个不太常见的问题——某个hover才会出现的二维码图片，它的角落会出现一些按钮，导致二维码被遮挡，而鼠标移上去的时候，hover出现的图片消失了。
问题还原
很快，找到了发现的场景。使用Edge浏览器，鼠标hover某按钮，按钮下面会出现一个二维码图片（常见于分享或者下载功能），鼠标hover到图片上，1、2秒后图片的角落（右上方或右下方）出现视觉搜索(Visual search)的相关按钮，鼠标再移动到这些按钮上，hover出现的二维码图片消失了。
问题原因
很明显，该二维码图片的消失，是因为丢失了hover状态，而hover状态丢失则是因为鼠标移动到了浏览器提供的这几个按钮上面。
解决问题
解决问题的思路已经很清晰了，就是要让这个按钮不出现。
首先想到，这个是浏览器自带的功能，是不是可以在浏览器关闭掉，但是细想一下，先不说用户会不会操作，单单让每个用户去操作就是很大的客服工作量，其次，也不是每个用户都会来反馈，沉默的大多数可能只会心里默默说一句：网站做得真烂！
那么，就需要找到其他不出现这个按钮的办法。
使用背景图替代img标签
由于这个按钮只会在img标签上出现，可以更改为使用背景图的方式去展示图片。当然这里可能会有一些占位、语意化、无障碍访问等问题，例如本身利用img标签的图片高宽百分比特性占位的话，可能就需要多加一些样式属性去适配这个修改。
缩小图片再放大
实验发现，图片的高宽之一小于96px，就不会出现这个按钮。那么，如果实在需要使用img标签，就可以把img标签设置成较小的高宽，然后使用样式属性transform再进行放大。
阻止触发按钮
仔细观察可以发现，这个按钮不是鼠标一挪动就马上出现的，那是不是说明它其实也是通过事件来触发的呢？
在stackoverflow和edge的github网站找到一个解决方案，在img标签上，添加下面的css属性：
pointer-events: none;
这个方法可以说是最简单，修改最快捷，影响最小的。但是，它也会有一些问题，例如会让元素的事件无效，alt属性设置的文字信息不能触发显示，同样也有无障碍访问的问题。
总结
以上就是解决这个小众问题的一点点个人思路，解决方案则可以根据不同场景的需要进行取舍。
