我正在尝试制作一个缩略图,在悬停时会将其图像(比包装器长)一直移动到左侧,仅使用 CSS 并使用img
元素而不是带有background-image
.
我遇到的问题是,鉴于图像具有不同的宽度,我不知道如何找到移动它的距离。
我做了一个演示,其中左侧图像正确移动,因为我计算了它需要移动多少,而具有相同 CSS 的右侧图像移动不正确。
我正在尝试制作一个缩略图,在悬停时会将其图像(比包装器长)一直移动到左侧,仅使用 CSS 并使用img
元素而不是带有background-image
.
我遇到的问题是,鉴于图像具有不同的宽度,我不知道如何找到移动它的距离。
我做了一个演示,其中左侧图像正确移动,因为我计算了它需要移动多少,而具有相同 CSS 的右侧图像移动不正确。
目前尚不清楚为什么您将自己限制为单独操作 img 元素,而不是探索更常见的背景图像精灵类悬停事件操作。
看看这篇Codrops 文章和他们的演示在这里(注意菜单中有 5 个演示)。
提供的技术不会产生您所追求的确切最终结果,但它们确实包括您需要使用的事件类型和操作的结构。