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

在我的CSS文件中，当鼠标悬停在进度条上时，我将“光标：指针”添加到样式中，使鼠标变为手形：

 .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);
}

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

谢谢，

---

--鲁迪

我认为这是因为那里有一些元素溢出。没有演示就很难说。您应该右键单击框架4，然后检查元素，看看出现了什么。显示代表性代码来重现问题，也可以考虑发布一个或类似的演示。也可以通知您的HTML代码。