md-button md-focused bug

[hodeyp]

I have an md-button with the following structure...

<md-button aria-label="New Transit" ui-sref="app.newtransit" class="md-icon-button">
  <md-tooltip>New Transit</md-tooltip>
  <md-icon>add</md-icon>
</md-button>

I believe expected behaviour is that when the cursor hovers over the button it displays a background colour of rgba(158,158,158,0.2). When the mouse leaves the button it returns to transparent.

What is actually happening is that the button background remains transparent when the cursor hovers over the button, and then adds the rgba(158,158,158,0.2) when the mouse leaves the button.

Observing what classes are being added, when the mouse hovers, the following styles are added...

a.md-button:not([disabled]).md-icon-button:hover, .md-button:not([disabled]).md-icon-button:hover {
    background-color: transparent;
}

a.md-button:not([disabled]):hover, .md-button:not([disabled]):hover {
    background-color: rgba(158,158,158,0.2);
}

The first of these entries looks to be wrong to me as it is overriding the second item.

When the mouse is no longer hovering, the following style is applied....

a.md-button:not([disabled]).md-focused, .md-button:not([disabled]).md-focused {
    background-color: rgba(158,158,158,0.2);
}

Checking the classes added to the button, md-focussed is indeed added to the button when the mouse hovers over the button, but is not removed when the mouse is no longer hovering.

[Frank3K]

Related: #4249.

[topherfangio]

According to the spec (http://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons), icon buttons do not have a hover effect, only a focus/click effect.

You have made this an icon button by adding class="md-icon-button".

Closing for now, please comment if you feel like we should re-open.