jQuery - 如何获取/读取 :hover 伪类上的 css 属性
我正在开发一个图像预加载器，它将预加载页面上的所有图像。我的方法如下：
onDomReady，循环遍历 $("*") //当 DOM 准备好时遍历所有元素
- if
$(this).tagName.toLowerCase() == 'img'，读取src属性，并预加载该图像 - ，否则 if
$(this).css("background-image") != "none"，读取 background-image 属性并预加载该图像
我的问题是，这种方法无法识别 :hover 类，该类通常是需要预加载的图像。
我想做的是能够在循环所有元素时检查 :hover 伪类是否存在，然后检查该类上的“background-image”属性是否存在。
我真的很想坚持这种方法，因为它 a) 允许我不必显式指定我想要预加载的每个图像，b) 负责处理 CSS 内的相对路径，如读取“背景图像” " 属性为我提供了相对于页面的路径。
所以，我的问题是：
使用 jQuery 是否可以读取元素的 :hover 伪类上的 CSS 属性？如果没有，有什么建议吗？
谢谢！
I am working on an image preloader that will preload all images on a page. My approach is as follows:
onDomReady, loop through $("*") //go thru all elements when the DOM is ready
- if
$(this).tagName.toLowerCase() == 'img', readsrcattribute, and preload that image - else if
$(this).css("background-image") != "none", read the the background-image prop and preload that image
My problem is that this approach does not pick up on the :hover class, which is normally the image that would need to be preloaded anyways.
What I would like to do is be able to, while looping through all elements, check for the existance of the :hover pseudo class, and then check for the existance of the "background-image" property on that class.
I really would like to stick with this approach, as it a) allows me to not have to explicitly specify each and every image I want to preload, and b) takes care of relative paths within the CSS, as reading the "background-image" property gives me the path relative to the page.
So, my question is:
Is is possible, using jQuery, to read the CSS properties on the :hover pseudo class for an element? If not, any suggestions?
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
当加载页面来搜索所有 DOM/CSS 图像时，这将是非常密集的……在公共网站上这可能不是一个好主意。一个不错的选择是利用图像精灵 (http://www.google.com/images/nav_logo26. png）并使用 CSS 定位它们
This is going to be very intensive when loading the page to search through all DOM/CSS images... it's probably not a good idea on a public site. A good alternative is to utilize image sprites (http://www.google.com/images/nav_logo26.png) and position them with CSS
听起来精灵确实是解决这个问题的正确方法。但是，如果由于某种原因无法实现它们，您需要访问 document.styleSheets 集合来搜索其中包含 :hover 的规则。 此页面将帮助您入门。
It does sound like sprites are the right solution to this problem. But if they can't be implemented for some reason, what you want to do is access the document.styleSheets collection to search for rules with :hover in them. This page will get you started.