I have a function in JavaScript that is activated through the onmouseover event in a table with records, the field changes color when I move the mouse, so alright the problem is that it only works in IE browsers and google chrome, already in Mozilla does it not work what I do?
onmouseover="mOvr(this,'#A8A8A8');"
function mOvr(src, clrOver) {
if (!src.contains(event.fromElement)) {
src.bgColor = clrOver;
}
}
This is an old known bug. The problem is that Firefox does not use event.fromElement (nor .toElement ) and others do not use event.relatedTarget that Firefox uses ... so you have to detect this feature and adapt the code and compare if event.relatedTarget is % w / w% are the same. You can take a look at the jQuery source code .
You could use a function of this type to fix this:
function fix(event) {
if (event.type == 'mouseenter') {
event.fromElement = event.relatedTarget;
}
if (event.type == 'mouseleave') {
event.toElement = event.relatedTarget;
}
}
event.target I assume you want this behavior only in !src.contains(event.fromElement) of mouseenter (ie src does not contain the element the mouse came from), so I think you'd better use src and if you want to reset, using onmouseenter="" . Something like this: link
But the most sensible would be to use CSS for mousehover purposes ... if you can go that way and give CSS classes to those elements so you can write rules in the CSS file.
PS: The error you mentioned onmouseleave is because you are using ReferenceError: event is not defined scripts.js:8:8 within the function without having passed an argument with that name. So you have to define the function with this parameter:
function mOvr(src, clrOver, event) {
and then inline use event .
I have done this well, but there is no way to pass the event parameter.
function mOvr(obj,color) {
obj.style.backgroundColor = "#A8A8A8";
}