how to get/read css property on :hover pseudo class

 

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' , read src attribute, 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!

    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

    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.

    链接地址: http://www.djcxy.com/p/3650.html

    上一篇: C ++

    下一篇: 如何获取/读取css属性：hover伪类