在Internet Explorer中使用SVG图像时，光标指针不显示 [英] Cursor pointer not showing when using an SVG image in Internet Explorer

问题描述

使用此html时：

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

与此css组合：

  a {
 display：block; 
} 
 object，img {
 width：200px; 
 height：200px; 
} 
 
 object：hover {
 cursor：pointer; 
} 
  

JsFiddle

当鼠标悬停在Internet Explorer中的图像上时，光标不会改变为指针

有什么想法吗？

方案

TL; DR：这是因为IE8无法解释对象，并将图像放在原位。 is： - ）

我相信这种行为与你所描述的完全相反 - 在IE 8中只有游标集ti 指针，在我的其他浏览器（FF，Chrome，IE 10 ...）的光标是默认，即箭头。

$我的解释是IE8不能解释SVG（IE不能解释SVG之前版本9），并显示图像作为链接的一部分 - 并给它适当的光标， 指针，在CSS中重复设置。然而，其他浏览器可以解释对象并正确显示它 - 并且不给它你想要的光标，因为元素类型是对象（尝试将闪光电影，例如YouTube视频，放入 a 元素，看看会发生什么）。

最后一个细节：无需使用：hover 选择器，光标显示在元素<

编辑：
Erik的评论非常漂亮（粘贴在这里只是为了更快的参考）：

你需要把光标规则放在svg里，而不是为了这个工作，因为这是事件的地方去标签。事件不会冒泡到父文档。它也将工作，如果你使用引用svg，像这样：jsfiddle.net/Mw8JX

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?

解决方案

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

这篇关于在Internet Explorer中使用SVG图像时，光标指针不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！