Removing onmouseover + onmouseout in core files (qa-theme-base.php) -> use pure CSS instead!

Question

As the title states, from my point of view there is no need to declare javascript classes for mouseover/mouseout.

Pure CSS can do it: .class:hover { ... }

I suggest removing the javascript onmouseover and onmouseout in qa-theme-base.php, but leaving the class attribute: CLASS="'.$class.'-button"

 

qa-theme-base.php:

line 682:
'-button" onmouseover="this.className=\''.$class.'-hover\';" onmouseout="this.className=\''.$class.'-button\';"/> ');

line 1032:
(isset($style) ? (' CLASS="'.$baseclass.'" onmouseover="this.className=\''.$hoverclass.'\';" onmouseout="this.className=\''.$baseclass.'\';"') : '').'/>');

line 1463:
'-button" onmouseover="this.className=\''.$class.'-hover\';" onmouseout="this.className=\''.$class.'-button\';"/> ');

 

Or do I miss something?

Comments

I just implemented it, example for the ask-button:

1. In qa-theme-base.php remove onmouseout/over in function form_button_data.
2. In your qa-styles.css replace: ".qa-form-tall-hover" with ".qa-form-tall-button:hover"
3. you are done!

Answer 1

I think it is done for browser compatibility (with IE6 I'm guessing). If you look at some of the CSS selectors, they actually include the :hover selector:

.qa-favorite-hover,.qa-favorite-button:hover {background-position: 0 0px;}

But I don't think this is necessary any more. IE6 is so old now and barely in use, we can let it degrade gracefully.

This actually brings up an interesting discussion about best practices, though, which I will post in a separate question with more details. Edit: here it is.

Comments

yes, ie6 should be neglected and "new" technologies should be used.

See IE-Statistics at http://www.w3schools.com/browsers/browsers_explorer.asp

September 2012: IE6 = 0.4 %