鼠标移动不灵对象元素

Question

上有没有一种方法，使mousemove事件处理工作在一个HTML <对象>标签？我有HTML这样的：

<object type="image/svg+xml" data="myfile.svg"></object> 
<img src="myfile.svg"/> 

和一些JavaScript/jQuery的是这样的：

$("img, object").on("mousemove", function() { 
    $("body").css("background-color","#f0f"); 
}); 
$("img, object").on("mouseleave", function() { 
    $("body").css("background-color","transparent"); 
}) 

但mousemove只工作在img标签。对object或object *应用pointer-events: all似乎没有帮助。

这里是一个fiddle。

$("img, object").on("mousemove", function() { 
 
    $("body").css("background-color","#f0f"); 
 
}); 
 

 
$("img, object").on("mouseleave", function() { 
 
    $("body").css("background-color","transparent"); 
 
})

img, object { 
 
    width: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Mouse over the images to change the background color. It doesn't seem to work for the object tag. 
 

 
<h2>SVG as &lt;object&gt;</h2> 
 

 
<object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/e/ea/Converted_to_SVG.svg"></object> 
 

 
<h2>SVG as &lt;img&gt;</h2> 
 

 
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ea/Converted_to_SVG.svg"/>