Cursor Pointer Not Showing When Using An Svg Image In Internet Explorer
Solution 1:
Try adding this to your CSS:
object{
pointer-events: none;
}
Solution 2:
TL;DR: It's because the IE8 can't interpret the object and puts the image in its place instead. And you describe your error the other way around than it actually is:-)
I'm quite convinced that the behaviour is quite opposite to what you describe - in IE 8 only is the cursor set ti pointer, in my other browsers (FF, Chrome, IE 10...) the cursor is default, i.e. arrow.
My explanation is that IE8 can't interpret the SVG (IE can't interpret SVG before version 9) and displays the image as a part of a link - and gives it the appropriate cursor, pointer, in your fiddle redundantly set in CSS. Other browsers, however, can interpret the object and display it correctly - and don't give it the cursor you want, since the element type is object (try putting a flash movie, for example a YouTube video, into the a element and see what happens).
And one last detail: no need to use the :hover selector, the cursor is displayed over the element only when it's ... yes, over the element.
Edit: The comment by Erik puts it very nicely (pasted here just for quicker reference):
You need to put the cursor rule inside the svg instead for this to work, because that's where the events will go for tags. The events will not "bubble" up to the parent document. It would also work if you used an that referenced the svg, like this: jsfiddle.net/Mw8JX
Post a Comment for "Cursor Pointer Not Showing When Using An Svg Image In Internet Explorer"