有一个带背景色的层在图片上时，图片onmousemove无效如何解决


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>居中的菜单</title>    <script src="js/all.js"></script>    <style>
        #smallBox
        {
            width: 98px;
            height: 98px;
            position: absolute;
            border: solid 1px #9af;
            filter: alpha(Opacity=50);
            opacity: 0.5;
            display: block;
            background:#aaa;
            left:10px;
            top:10px;
        }
        #zoomImage
        {
            width: 300px;
            height: 300px;
            position: absolute;
            top: 125px;
            overflow: hidden;
            border: solid 1px #000;
            left: 200px;
            display: block;
        }
    </style>
</head>
<body>
    <div style="background: #eee; width: 400px; height: 200px; position: relative; left: 100px;
        top: 100px; border: solid 1px #000;">
        
        <img src="goodpic/2011-2-212.jpg" onmousemove="document.getElementById('smallBox').innerHTML=event.clientX;">
        <div id="smallBox">
            a
        </div>
        </img>
        
    </div>
</body>
</html>鼠标移到框子上，读数不变化，说明mousemove未起作用,设定透明可以，不过除此之外，还有别的办法吗

解决方案 »

  1.   

    <img src="goodpic/2011-2-212.jpg" onmousemove="document.getElementById('smallBox').innerHTML=event.clientX;">
     你的这一句是鼠标放在图片上才有效果哈 你可以改成 
    <img src="goodpic/2011-2-212.jpg" onmousemove="alert(1);">
    这样效果明显点你看一下有没有效果
      

  2.   

    如果你是要在图片上有效果 就写成 
    <div style="background: #eee; width: 400px; height: 200px; position: relative; left: 100px;
            top: 100px; border: solid 1px #000;">
            
            <img src="goodpic/2011-2-212.jpg" onmousemove="document.getElementById('smallBox').innerHTML=event.clientX;">
            <div id="smallBox">
                a
            </div>
            </img>
            
        </div>
    如果你要在id为smallBox上有效果你就写成
    <div style="background: #eee; width: 400px; height: 200px; position: relative; left: 100px;
            top: 100px; border: solid 1px #000;">
            
            <img src="goodpic/2011-2-212.jpg">
            <div id="smallBox"  onmousemove="document.getElementById('smallBox').innerHTML=event.clientX;">
                a
            </div>
            </img>
            
        </div>
      

  3.   

    这个产生的原因是因为小黑框挡住了图片，而小黑框又不是图片的子元素，所以当小黑框有背景色的时候就表示此时鼠标不在图片上了，因此目前的权宜之计是在img的父元素上加mousemove事件。不很理想，希望有更好的方法。