HTML鼠标指针区域（chrome问题）

Question

在我的CSS文件中，当鼠标悬停在进度条上时，我将鼠标改为手形，方法是将“curser：pointer”添加到样式中：

 .progressBar { 
   border:1px solid #aaa; 
   color:#fff; 
   width:295px; 
   height:5px;
   display:inline-block;
   cursor:pointer;
}
.progress {
   background-color:#ff0000; 
   height:5px;
   display:inline-block;
   width: 100%; 
}

（请注意我的进度颜色为“红色”。） 它工作正常，事实上我的进度条是可点击的，我有一个JS代码执行点击操作。事情很好。但由于某种原因，手形在“红色”区域有更高的高度！？！

在快照＃2中看到，一旦我将鼠标略微移动到条形图下方，手形就会消失，但在快照＃4（在“红色”区域中），手形不会消失直到我将鼠标向下移动！

我刚才意识到我在使用Chrome时只会遇到这种情况，因为当我用IE加载页面时，我没有看到这个问题？！

这是我点击栏上的代码：

   $('#progressBar2').bind('click', function (ev) {
    var $div = $(ev.target);
    var offset = $div.offset();
    var x = ev.clientX - offset.left;
    audioElement2.currentTime = x;
    });

并且，以下是更新进度条的代码：

function updateProgress2() {
   var progress = document.getElementById("progress2");
   var value = 0;
   if (audioElement2.currentTime > 0) {
      value = Math.floor((100 / audioElement2.duration) * audioElement2.currentTime);
   }
   progress.style.width = value + "%";

   var currResult = document.getElementById("currTime2");
   currResult.innerHTML = formatSecondsAsTime(audioElement2.currentTime);
}

知道如何解决这个问题吗？

谢谢， --Rudy