Cursor pointer not showing when using an SVG image in Internet Explorer

Question

When using this html:

<a href="http://www.wikipedia.com">
    <object data="http://upload.wikimedia.org/wikipedia/en/4/4a/Commons-logo.svg" type="image/svg+xml">
        <img src="http://herdeirodocaos.files.wordpress.com/2007/11/wikipedia-logo.jpg" alt="Logo" />
    </object>
</a>

Combined with this css:

a {
    display: block;
}
object, img {
    width: 200px;
    height: 200px;
}

object:hover {
    cursor: pointer;
}

JsFiddle

The cursor doesn't change to a pointer (hand) when the mouse is over the image in Internet Explorer only

Any idea?

Higgler

The cursor is actually default and not pointer in Chrome 31 (mac). – Abdicate

Answer 1

Try adding this to your CSS:

object{
    pointer-events: none;
}

Embroideress

please specify what you mean by this in your answer – Rabkin

Answer 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

Elaineelam

You need to put the cursor rule inside the svg instead for this to work, because that's where the events will go for <object> tags. The events will not "bubble" up to the parent document. It would also work if you used an <img> that referenced the svg, like this: jsfiddle.net/Mw8JX – Gravettian

what? have you bothered trying the fiddle? why don't you edit that one I provided to make it works under IE8 to prove your theory? – Higgler

@Geeo: I'm sorry to use your language: What? Your fiddle proves what the answer says. You can't influence behavior of cursor in object element. In IE8 the object boils down to img element, that's why it does function in this sole case. And excuse me, this site is not about "Gimme gimme gimme!". – Elaineelam

I'm fully aware it doesn't work on IE8, but nowhere in my question I mentioned IE8. And about the "gimme gimme gimme" part, I was merely asking for code to supports your claim since you seem to have totally misunderstood what the issue is about. – Higgler

I wrote IE8 in my previous comment but it was just a typo. My question isn't about IE8 at all – Higgler

about the edit part: have you opened the link? It's an anchor with an img inside, my question is different. – Higgler

Sorry for the delay, I was little busy. I think this discussion leads to eternal damnation, since it seems each of us speak a different language here. I have opened the link, I have described what's in it and what's wrong from my point of view and how I think you need to approach the problem. There is nothing more to add, I'm afraid. Please go through the answer one more and see if the penny drops. Your fiddle is not an anchor with an img inside, it's an anchor with an object inside and that is the problem. Just drop the object tag and use img tag and everything will be okay. – Elaineelam

Answer 3

I had this problem too and fixed it by adding cursor:pointer to the link style. i.e.

a { cursor:pointer }

Slav