mouseEvent 不会因与图像重叠的 div 而触发
嗨， 我面临与图片重叠的 div 的 mouseover 和 mouseout 事件问题。我想在图像的某些部分显示热点（突出显示和可单击区域）。例如，有一张男孩的照片，他的脸上有可点击的方形区域，就像 Facebook 中一样。我使用以下代码来实现此功能
<!DOCTYPE HTML>
<html>
<head>
<title>test.html</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<style type="text/css">
.mouseOutClass {
border: 1px dotted #74CFFA;
}
.mouseOverTextClass {
cursor: pointer;
border: 1px solid #74CFFA;
background-color: #ffeaab;
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
</style>
<script type="text/javascript">
function highlightBox(obj, show) {
if (show) {
obj.className = "mouseOverTextClass";
} else {
obj.className = "mouseOutClass";
}
}
</script>
</head>
<body>
<div style="height: 100%;width: 100%;">
<div >
<div style="position:absolute; left:0px; top:0px; height:150px; width:150px;"
class="mouseOutClass" onmouseover="return highlightBox(this, true);" onmouseout="return highlightBox(this, false);" >
</div>
<div style="position:absolute; left:200px; top:100px; height:200px; width:200px;"
class="mouseOutClass" onmouseover="return highlightBox(this, true);" onmouseout="return highlightBox(this, false);" >
</div>
<img src="images/about.jpg" />
</div>
</div>
</body>
。highlightBox 方法仅更改绘制边框的 div 类并更改 div 的背景颜色和不透明度。 mouseover 事件在除 IE9 之外的所有浏览器中都工作正常。在 IE 中，如果鼠标位于与图片重叠的 div 上，则不会触发 mouseover 事件。我正在使用 HTML5 文档类型作为页面。
更新：如果我在 div 中绘制表格，则鼠标事件有效。但是，该事件只会在表格中有文本的地方触发。在我看来，鼠标事件在 IE9 的空 div 中不起作用。有什么意见吗？
Possible Duplicate:
IE Problem : Transparent div above a picture doesn't trigger the CSS:hover
Hi,
Am facing issue with mouseover and mouseout event for a div which is overlapping with a picture. I want to show hotspots(highlighted and clickable area) over some parts of an image. For example, there is a picture of boy and his face has clickable square area over it like in facebook. Am using following code to achieve this
<!DOCTYPE HTML>
<html>
<head>
<title>test.html</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<style type="text/css">
.mouseOutClass {
border: 1px dotted #74CFFA;
}
.mouseOverTextClass {
cursor: pointer;
border: 1px solid #74CFFA;
background-color: #ffeaab;
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
</style>
<script type="text/javascript">
function highlightBox(obj, show) {
if (show) {
obj.className = "mouseOverTextClass";
} else {
obj.className = "mouseOutClass";
}
}
</script>
</head>
<body>
<div style="height: 100%;width: 100%;">
<div >
<div style="position:absolute; left:0px; top:0px; height:150px; width:150px;"
class="mouseOutClass" onmouseover="return highlightBox(this, true);" onmouseout="return highlightBox(this, false);" >
</div>
<div style="position:absolute; left:200px; top:100px; height:200px; width:200px;"
class="mouseOutClass" onmouseover="return highlightBox(this, true);" onmouseout="return highlightBox(this, false);" >
</div>
<img src="images/about.jpg" />
</div>
</div>
</body>
The highlightBox method just changes the class of the div which draws a border and changes bgcolor and opacity of the div.
The mouseover event is working fine in all browsers other than IE9. In IE the mouseover event is not fired if the mouse is over div where it is overlapping with picture. Am using HTML5 doctype for the page.
Update: the mouse events works if I draw a table in the div. however, the event will fire only on those places where there is a text in the table. Seems to me that mouse event does not work in empty div in IE9.. Any comments?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
添加 z-index:100 到 div 样式
add a z-index:100 to the div style