我现在使用onmouseover和onmouseout在鼠标悬停时显示不同的图像。
onmouseover图像的尺寸与onmouseout图像的尺寸不同，因此当图像悬停在上面时，会改变页面布局。
下面是我当前拥有的代码示例:
是否有一种方法可以将onmouseover图像设置为与onmouseout图像的宽度一致，从而不改变页面布局？
（我对这一切都很陌生，所以请宽容我）
最简单的方法是首先找到您的主要图像宽度和高度尺寸
我的主图像宽度是750px，高度是500px
因此您只需为您的img标记设置width and height的style属性
它将为所有图像设置width和height，包括onmouseover和onmouseout所有三幅图像将以相同的尺寸显示
null
<img style="width: 750px; height: 500px;" src="https://images.unsplash.com/photo-1592134959663-4cdd34840e63?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
onmouseover="this.src='https://images.unsplash.com/photo-1592101872812-cdbbe7912bfb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60';"
onmouseout="this.src='https://images.unsplash.com/photo-1592081164105-70c567c6cfa2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60';">