PDA

View Full Version : [NOREPRO] IE: Button over class not applied



mboiss
17 Apr 2014, 8:14 AM
Hi guys, When the button is in the over (hovered) state, the "*-over" class is not added
Fiddle: https://fiddle.sencha.com/#fiddle/569

Ext version tested:


Ext JS 5.0.0.736 Neptune
Ext JS 4.2.1 Neptune
Browser versions tested against:


Chrome Version 34.0.1847.116 m
IE Version: 11.0.9600.16659 Update Version: 11.0.5 (KB2936068)
DOCTYPE tested against:

html
Description:
ONLY IN IE: When the button is in the over (hovered) state, the "*-over" class is not added

Steps to reproduce the problem:

Open and run the fiddle in Chrome
Inspect the button with Developer tools
Over the button
The classes "*-over" are added
Open the and run the same fiddle in IEInspect the button with Developer tools
Over the button
NO Classes where added.
If you try the previous steps with EXT JS 4.2.1 it works in both browser.

The result that was expected:

The classes "*-over" are added
The result that occurs instead:

Nothing!

mitchellsimoens
18 Apr 2014, 5:13 AM
Just tried your fiddle with IE11 and I see the "x-btn-default-small-noicon x-over x-btn-over x-btn-default-small-over" added to the <a> node of the button. The button is also darker from those styles.

araad
18 Apr 2014, 10:44 AM
Hi,
I'm seeing the same problem in my app. I have a windows 7 machine and using IE 11 and it does not add the over class on buttons when you hover. Works fine with Chrome, Firefox and Safari.

evant
18 Apr 2014, 10:29 PM
Also can't reproduce. Running the linked fiddle in IE, the classes get added to the button element.

See the attached screen grab.

araad
19 Apr 2014, 7:31 AM
I ran the fiddle example using Framework: Ext JS 5.0.0.736 Crisp and it doesn't work, also tried the ExtJS 5 Kitchen Sink buttons example and I still get the same behavior, which is no over class being added to the button.

I've tried other hovering behavior on other components, such as grid rows and columns, and they work fine. For example column header on grid will add the 'x-column-header-over' class. It seems like it's just the button that is not adding the over class.

araad
19 Apr 2014, 7:53 AM
I noticed the same behavior on tabs also, when i hover on a tab header no over class gets added. Both buttons and tabs use the <a> tag, while the grid columns and rows use the <div> tag. It seems like the problem may be related to the fact that hover may not work on <a> tags without an assigned href.

I'm using IE version: 11.0.9600.17041, Update: 11.0.7