[Chrome] Cursor is not consistent when hovering button's icon

[oleq]

To deal with it, either a <styles> declaration must be injected into SVG, which is not an option here because not every element using an icon from the sprite should have cursor: pointer, or hack it a little bit, like this

    .ck-button:before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
    }

The hack works but, TBH, I don't like it.

BTW: We're not alone http://stackoverflow.com/questions/26672936/cursor-pointer-on-svg-element-is-not-working.

[oleq]

And no, setting cursor: pointer to <svg>, <use> or .ck-button * does not help. What goes inside SVG's XML tree seems to be out of control. At least in Chrome, because Firefox seems to be OK.

[fredck]

I don't feel that pointer is the right thing for UI buttons... it should be default.

[oleq]

That's a good point. Given that the spec is quite clear what is the purpose of cursor: pointer

pointer The cursor is a pointer that indicates a link.

and this great comment I stumbled upon also explains a lot, I'm willing to stick to the spec.

However note that if you navigate GitHub, all buttons change the cursor to the "pointer" style and people might be used to it.

Standards.