How to use .contentDocument in a .hover variable path? - object

Question

I have an SVG loading like this:
<object id="svg-object" type="image/svg+xml" width="1400px" height="900px" data="media/1.svg?"></object>
I then have a function that works calling out one element in this svg and apply a style to it just fine. Here is the onload event that is working for getting me the element properly:
window.onload=function() {
var svgObject = document.getElementById('svg-object').contentDocument;
var element = svgObject.getElementById('sprite1');
};
But how do I set a .hover even in for this same element? I've tried:
$('#${element}').hover(function(e) { }
But no luck.
Also, how can I apply the svgObject variable to a whole class like path or polygon? I use this on a local inline SVG and it works fine:
$("polygon, path").hover(function(e) { }
I would like this to work on the object embedded in the svg also.

Answer 1

Sorry, I am not able to put an external svg in snippet (or at least I don't know how) as external URL will not load in an object. And it needs to load as an object for you to see the issue.
Any help?
Also, here is code that works defining element color from script but mouseover not working either. (tried instead of hover)
window.onload=function() {
var svgObject = document.getElementById('svgEmb').contentDocument;
var element = svgObject.getElementById('left');
element.style.fill = "blue";
element.style.stroke ="blue";
};
element.addEventListener("mouseover", function() {
element.style.fill = "red";
element.style.stroke ="red";
});