鼠标悬停元素闪烁
我的网页上有一张图像，当用户将鼠标悬停在该图像上时，会出现另一张图像。然后将鼠标悬停在出现的图像上时，它会闪烁。
有人知道这是为什么吗？
托尼
更新：悬停时第一个图像不会消失，只是另一个（较小的）图像出现在左上角的顶部。当现在移动到那个较小的图像上时，就会出现闪烁。
网站上的图像是图库的一部分，因此它是一个 php 变量，当用户从图像列表中进行选择时就会加载。因此，将一个嵌入到另一个中是非常困难的。
I have an image on a webpage and when the user hovers over it, another image appears. When then hovering over the appearing image, it flickers.
Anybody any idea why that is?
Tony
UPDATE: The first image does not dissapear when hovering, just another (smaller) image appears over the top in the left top corner. When now moving over that smaller image, then the flicker appears.
The image on the site is part of a gallery, so it's a php variable and gets loaded when a user selects from a list of images. So embedding one into the other is very hard.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
因为浏览器正在获取新图像。最好的解决方案是将两个图像合并为一个，或者纯粹使用 CSS 来更改
:hover上的背景位置，或者（对于 IE6 和非锚定元素）使用 JS 更改背景位置。Because the browser is fetching the new image. The best solution is to incorporate both images into one, and either purely use CSS to change the background-position on
:hover, or ( for IE6 and non-anchor elements ) change the background position with JS.在IE中？ IE 因不缓存动态加载的图像（通过 CSS
:hover或由于 Javascript 事件）而臭名昭著。您可以使用 CSS 精灵（基本上，使用一个图像文件显示两个图像，并使用定位来显示其中一个图像；教程，由 Mike Robinson 链接），或您可以使用图像预加载：编辑：其他浏览器将在首次加载时执行相同的操作。 IE 可能会在每次切换时继续执行此操作。
In IE? IE is notorious for not caching images that are loaded dynamically (either with CSS
:hoveror due to Javascript events). You can use CSS sprites (basically, using one image file to display both images, and using positioning to show one or the other; tutorial, linked by Mike Robinson), or you can use image preloading:Edit: and other browsers will do the same on first load. IE just may continue to do it on every switch.
如果我理解正确，您可能会在每次触发鼠标悬停事件时替换图像的 src 。因此，即使您的图像被替换，您的事件也会被触发并且图像会被自身替换，这可能会导致闪烁。
If I understand you right, you probably replace the src of your image every time the mouseover event is fired. So, even when your image is replaced, your event is fired and the image is replaced with itself, which may cause flickering.
我猜你可能用的是IE。这是某些版本中实现缓存方式的错误。您可以通过将网络服务器配置为发送 正确的缓存标头 或使用 < a href="http://www.alistapart.com/articles/sprites" rel="nofollow noreferrer">CSS 精灵。我推荐后者，因为这意味着更少的 HTTP 请求，并且即使没有 JS 预加载也能工作。
I guess you're probably using IE. This is a bug with the way it implements caching in some versions. You fix it by either configuring your web server to send proper cache headers, or by using CSS sprites. I recommend the latter, as that means less HTTP requests, and the preloading works even without JS.