CODEWITHSUNDEEP
htmlcssinternet-explorersvg
user1047100
user1047100

Reputation:

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

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?

Upvotes: 2

Views: 5802

Answers (3)

G4gene
G4gene

Reputation: 1

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

a { cursor:pointer }

Upvotes: -1

Harry
Harry

Reputation: 61

Try adding this to your CSS:

object{
    pointer-events: none;
}

Upvotes: 3

Pavel
Pavel

Reputation: 708

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

Upvotes: 0

Related Questions