What an intriguing Chrome bug! I hadn't even noticed it until I stumbled upon your question. It made me curious about how Firefox handles the same event.
I decided to create a simple code snippet to monitor the hover and click events triggering. You can check out this snippet fiddle here.
In the fiddle, if you uncomment the last segment,
$(document).mousemove(function () {
console.clear();
console.log('hovered element now: '+hoveredElement+ ' -- & -- '+'clicked element now: '+ clickedElement);
});
and then comment out the section below,
$(hoveredElement).mouseenter(function () {
$(this).addClass('jsHover');
}).mouseleave(function () {
$(this).removeClass('jsHover');
});
You'll see that the code reproduces the issue you mentioned (try it in both Chrome and FF—I managed to replicate it in Chrome 41).
Upon observing the respective browsers' consoles, I found that when you click outside of the span element and then drag the mouse to enter the element, this is what happens:
In Chrome
If you only hover outside the first span element without entering its space: Console output
hovered element now: BODY -- & -- clicked element now: undefined
Now, after clicking the left mouse button (mousedown and mouseup): console output
hovered element now: BODY -- & -- clicked element now: BODY
If you move the mouse ever so slightly: console output
hovered element now: BODY -- & -- clicked element now: BODY
Let's repeat the same steps in Firefox:
If you simply hover outside the first span element without entering its space: Console output
hovered element now: BODY -- & -- clicked element now: undefined
After clicking the left mouse button (mousedown and mouseup): console output
hovered element now: BODY -- & -- clicked element now: undefined
Notice how it shows undefined for the clicked element compared to Chrome's result.
Moving the mouse slightly: console output
hovered element now: BODY -- & -- clicked element now: BODY
**Next set of tests **
Click outside the first span element, drag the mouse to within the span element, and release the mouse without moving it afterward. Chrome console output:
hovered element now: SPAN -- & -- clicked element now: BODY
Firefox console output:
hovered element now: SPAN -- & -- clicked element now: undefined
Observe the discrepancies in outputs between the two browsers.
As for why this difference exists between the browsers, I do not have an answer. All I can say is that the pseudo-class :hover doesn't get triggered in Chrome but does in FF.
So, what's the solution, you ask?
Here's my workaround: manually add the hover class when the event occurs. This prompts Chrome to dynamically add the class, while FF already has it by default ;)
Once again, in the fiddle, uncomment the following code...
$(hoveredElement).mouseenter(function () {
$(this).addClass('jsHover');
}).mouseleave(function () {
$(this).removeClass('jsHover');
});
And if desired, comment out the last section responsible for console output.
This action adds a jsHover class (defined alongside the regular :hover pseudo-class in CSS) to the span element when the specific event triggering our issue occurs.
The complete code snippet is as follows:
$(document).ready(function () {
var hoveredElement;
var clickedElement;
$(document).mousemove(function (event) {
hoveredElement = event.target.nodeName;
$(hoveredElement).mouseenter(function () {
$(this).addClass('jsHover');
}).mouseleave(function () {
$(this).removeClass('jsHover');
});
//console.log('hovered element now: ', hoveredElement);
return hoveredElement;
});
$(document).click(function (event) {
clickedElement = event.target.nodeName;
//console.log('clicked element now: ', clickedElement);
return clickedElement;
});
/*
$(document).mousemove(function () {
console.clear();
console.log('hovered element now: '+hoveredElement+ ' -- & -- '+'clicked element now: '+ clickedElement);
});
*/
});
.page {
height:100%;
width:100%;
/*background:rgba(12, 132, 49, 0.3);*/
}
div {
height:200px;
width:250px;
/*background:pink;*/
}
span {
/*background-color:cyan;*/
}
span:hover, span.jsHover {
background-color:blue;
color:white;
font-weight:bold;
}
.activeElement {
background:#bfbfbf;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<span>before page div span element</span>
<br/>
<hr/>
<div class="page">
<div> <span>inside pade div span element </span>
<p>wjhjhewh</p>
</div>
</div>
Hope this explanation helps. Happy coding!