鼠標移動不靈對象元素

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"/>