鼠标悬停时元素位置错误

Question

目前，我正在创建一个简单的视频播放器来练习。但是，我面对的是一些我以前从未见过的东西，一些我花了几个小时想办法解决的东西，但我没有成功。

这是我的代码=>

var left = document.getElementById('core').getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
window.onmousemove = function (e) {
let x = ((e.clientX + window.pageXOffset) - left);
document.getElementById("thumbnail").style.left = (x + "px");
}

body {
overflow: hidden;
}
.container {
width: 100%;
max-width: 800px;
position: relative;
background-color: blue;
height: 200px;
overflow: hidden;
}
.core {
margin: 0;
display: flex;
position: absolute;
bottom: 4px;
width: 100%;
flex-wrap: nowrap;
height: auto;
}
#time {
font-size: 14px;
text-shadow: 0 1px 1px rgb(0 0 0 / 15%);
color: #fff;
align-self: center;
align-items: flex-start;
margin: 0 12px;
min-width: 45px;
text-align: center;
}
#progressZone {
width: 100%;
background-color: green;
position: relative;
}
#progress{
z-index: 1;
border-radius: 8px;
height: 2px;
width: 100%;
outline: none;
position: absolute;
top: 0;
bottom: 0;
appearance: none;
-webkit-appearance: none;
margin: auto;
background: transparent;
margin-right: 10px;
}
.thumbnail {
display: none;
z-index: 1;
position: absolute;
bottom: 30px;
right: auto;
margin: 0;
width: 12em;
height: 7em;
background: rgb(200, 200, 200);
pointer-events: none;
padding: 2px 2px;
transform: translateX(-50%);
left: 50%;
}
.thumbnail::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
border-top: 8px solid rgb(200, 200, 200);
transform: translateY(-19%);
}
#progress:hover + .thumbnail {
display: block;
}

<div class="container">
<div id="core" class="core">
<div id="time">01:14:28</div>
<div id="progressZone">
<input id="progress" class="range" type='range' min="0" max="100" step="0.01" value="0">
<div id="thumbnail" class="thumbnail"></div>
</div>
</div>
</div>

问题是:当我悬停输入栏时，我得到错误的悬停位置。经过几个小时试图找出为什么会发生这种情况，我发现#time是，间接，导致了这一切。#time的存在使输入栏可能显示错误的悬停时间。但是我不能删除#time，我需要这个结构中的代码，用divs包装。如果删除#time并测试代码，您将看到悬停位置将是正确的。

这是我期望发生的事情的屏幕截图=>

image(我还不能添加嵌入图像)

我怀疑这与flex的属性有关，也与position有关。但我试了所有办法来解决这个问题，但没有成功。你能帮我理解或解决这个问题吗?

如果需要，这里还有jsfiddle链接=>https://jsfiddle.net/9qvLd35a/

非常感谢。

Answer 1

在你的javascript中，你从整个core-div中取左值。但是您只需要来自progressZone的值。可以这样调整:var left = document.getElementById('progressZone').getBoundingClientRect() ...

var left = document.getElementById('progressZone').getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
window.onmousemove = function (e) {
let x = ((e.clientX + window.pageXOffset) - left);
document.getElementById("thumbnail").style.left = (x + "px");
}

body {
overflow: hidden;
}
.container {
width: 100%;
max-width: 800px;
position: relative;
background-color: blue;
height: 200px;
overflow: hidden;
}
.core {
margin: 0;
display: flex;
position: absolute;
bottom: 4px;
width: 100%;
flex-wrap: nowrap;
height: auto;
}
#time {
font-size: 14px;
text-shadow: 0 1px 1px rgb(0 0 0 / 15%);
color: #fff;
align-self: center;
align-items: flex-start;
margin: 0 12px;
min-width: 45px;
text-align: center;
}
#progressZone {
width: 100%;
background-color: green;
position: relative;
}
#progress{
z-index: 1;
border-radius: 8px;
height: 2px;
width: 100%;
outline: none;
position: absolute;
top: 0;
bottom: 0;
appearance: none;
-webkit-appearance: none;
margin: auto;
background: transparent;
margin-right: 10px;
}
.thumbnail {
display: none;
z-index: 1;
position: absolute;
bottom: 30px;
right: auto;
margin: 0;
width: 12em;
height: 7em;
background: rgb(200, 200, 200);
pointer-events: none;
padding: 2px 2px;
transform: translateX(-50%);
left: 50%;
}
.thumbnail::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
border-top: 8px solid rgb(200, 200, 200);
transform: translateY(-19%);
}
#progress:hover + .thumbnail {
display: block;
}

<div class="container">
<div id="core" class="core">
<div id="time">01:14:28</div>
<div id="progressZone">
<input id="progress" class="range" type='range' min="0" max="100" step="0.01" value="0">
<div id="thumbnail" class="thumbnail"></div>
</div>
</div>
</div>

在我看来，这应该解决了这个问题。我希望我解决了你的问题:)