Jump to content

[SOLVED] Inefficient uses of :hover in CSS?


random1

Recommended Posts

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.

Link to comment
https://forums.phpfreaks.com/topic/182135-solved-inefficient-uses-of-hover-in-css/
Share on other sites

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.

        * 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.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.