[SOLVED] Inefficient uses of :hover in CSS?

[random1]

I'm making my web app skinny, optimized.

 

For CSS I'm testing using Google Page Speed,

 

Results:

 

stylesheet.css has 0 very inefficient rules, 0 inefficient rules, and 7 potentially inefficient uses of :hover out of 199 total rules.

Rules that use the :hover pseudo-selector on non-anchor elements. This can cause performance problems in Internet Explorer versions 7 and 8 when a strict doctype is used.

        * select:hover
        * textarea:hover
        * input[type="text"]:hover
        * input[type="password"]:hover
        * select:hover
        * .topbarfield:hover
        * .userprofileselect:hover

 

How can this be resolved? Any ideas? I'm using XHTML 1.0 Strict as a DOCTYPE.

[haku]

They can be resolved by not using :hovers, but that's not so practical. Seven hovers is not much of a drain at all though.

 

But out of curiosity, why are you putting hover on those elements? They aren't elements that would traditionally be hovered, though I can think of some reasons you may want to. But I'm curious about your usage.

[random1]

        * select:hover

        * textarea:hover

        * input[type=text]:hover

        * input[type=password]:hover

        * select:hover

        * .topbarfield:hover

        * .userprofileselect:hover

 

The main reason I'm using :hover on these elements is because I want to show state and position on input elements.

 

For example you hover over a field the background colour changes and cursor so that you can easily tell which form field you are on (or have focus on). That kinda thing.

[haku]

The focus I think would be good, but the :hover seems like it may be going a little overboard. But without seeing the actual site, I'm really just talking out my butt.