onmouseover event doesn't work on whole div in Chrome
Question
I made a grid of 10px divs and attached a mouseover listener to each div. In Chrome, when I enter a div from the bottom with the mouse pointer, the event listener isn't triggered until I'm about halfway up the div. This doesn't happen if I make the divs much bigger or if I use Firefox. Why is this happening with small divs in Chrome?
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
for(var row = 0; row < 10; row++) {
var rowDiv = document.createElement("div");
rowDiv.style.lineHeight = 0;
for(var col = 0; col < 10; col++) {
var cellDiv = document.createElement("div");
cellDiv.style.height = "10px";
cellDiv.style.width = "10px";
cellDiv.style.display = "inline-block";
cellDiv.style.backgroundColor = "green";
rowDiv.appendChild(cellDiv);
cellDiv.onmouseover = (function(cell) {
return function() {
cell.style.backgroundColor = "yellow";
};
})(cellDiv);
}
document.getElementById("container").appendChild(rowDiv);
}
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
1 answers
solution1
1 2015-05-22 16:49:40
Setting style.lineHeight to 0 was the problem here, but it was necessary. There is a way to fix the problem that it created, though.
First, let me give a quick overview of the original situation. I had a grid of divs in which I wanted all neighboring divs to be touching each other. I also wanted separate mouse event listeners on all of the divs. In order to get the row divs (containers for the individual divs) to touch each other, I set their line heights to 0. This had the unfortunate effect of making the mouse event listener work on only the upper half of each div (except for the ones in the bottom row).
The overflow property fixes that problem. Simply set overflow to hidden for each row div and the mouse event listeners will work over the entire area of their div.
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
for(var row = 0; row < 10; row++) {
var rowDiv = document.createElement("div");
rowDiv.style.lineHeight = 0;
rowDiv.style.overflow = "hidden";
for(var col = 0; col < 10; col++) {
var cellDiv = document.createElement("div");
cellDiv.style.height = "10px";
cellDiv.style.width = "10px";
cellDiv.style.display = "inline-block";
cellDiv.style.backgroundColor = "green";
rowDiv.appendChild(cellDiv);
cellDiv.onmouseover = (function(cell) {
return function() {
cell.style.backgroundColor = "yellow";
};
})(cellDiv);
}
document.getElementById("container").appendChild(rowDiv);
}
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.