我想显示一条垂直线，该垂直线将在和的图表悬停时出现，并且在鼠标退出图表元素时消失。奇怪的是，mouseleave和mouseout事件似乎在鼠标不移动或上下移动（而不是左右移动）时触发，请参见下面的代码段。我不希望鼠标暂停时线条消失，并且希望它随行而行。
我尝试在mouseenter和mouseover悬停时触发代码，但是mousemove（请参见下面的代码）是唯一随着光标位置变化而连续触发的事件。
//$(document).ready(function() {
function showVerticalLine(e) {
var topBarHeight = 56;
var bottomHeight = 100;
var posX = $(this).offset().left;
var x = e.pageX;
var y = $(window).innerHeight();
//Change line so that it appears at the position of the cursor
$('.verticalTrackerLine').css({
'opacity': '1',
'left': x,
'top': topBarHeight,
'height': y - topBarHeight - bottomHeight + "px",
'transition': 'left 0.1s'
});
//Update string to show when the charts are being hovered over
$("#testSTRING").html('you are moving/hovering');
};
function hideVerticalLine(){
//Hide the line
$('.verticalTrackerLine').css({
'opacity': '0'
});
//Update string to show when the charts are being hovered over
$("#testSTRING").html('you have left');
}
$("#chart1").add("#chart2").mousemove(showVerticalLine);
$("#chart1").add("#chart2").mouseout(hideVerticalLine);
//}).chart {
margin-top: 30px;
width: 100px;
height: 30px;
border: 1px solid black;
background-color: red;
}
.verticalTrackerLine {
border-left: 2px dashed RGB(68,74,79);
position: fixed;
z-index: 1;
opacity: 0;
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<SPAN id="testSTRING"></SPAN>
<SPAN class="verticalTrackerLine"></SPAN>
<DIV id="chart1" class="chart">Chart 1</DIV>
<DIV id="chart2" class="chart">Chart 2</DIV>
</head>
我们将不胜感激地收到任何帮助/建议。
答案 0 :(得分：2)
当您将鼠标悬停在会影响鼠标悬停在实际行上方的行上时，您的猜测是正确的。因此，只需将pointer-events: none;添加到.verticalTrackerLine选择器即可解决此问题，从而使鼠标与行完全没有交互。
我还对您的代码做了一些小的JS清理，没有什么大的问题。无需每次鼠标移动都重新应用CSS规则transition: left 0.1s，因此现在已在CSS中进行了设置。
$(function() {
var topBarHeight = 56;
var bottomHeight = 100;
var $line = $('.verticalTrackerLine');
var $charts = $("#chart1, #chart2");
var $test = $("#testSTRING");
function showVerticalLine(e) {
var posX = $(this).offset().left;
var x = e.pageX;
var y = $(window).innerHeight();
//Change line so that it appears at the position of the cursor
$line.css({
'opacity': 1,
'left': x,
'top': topBarHeight,
'height': y - topBarHeight - bottomHeight + "px"
});
//Update string to show when the charts are being hovered over
$test.html('you are moving/hovering');
};
function hideVerticalLine() {
//Hide the line
$line.css('opacity', 0);
//Update string to show when the charts are being hovered over
$test.html('you have left');
}
$charts
.mousemove(showVerticalLine)
.mouseout(hideVerticalLine);
});.chart {
margin-top: 30px;
width: 100px;
height: 30px;
border: 1px solid black;
background-color: red;
}
.verticalTrackerLine {
border-left: 2px dashed RGB(68, 74, 79);
position: fixed;
z-index: 1;
opacity: 0;
transition: left 0.1s;/* <------ this was moved from JS */
pointer-events: none; /* <------ this was added */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<output id="testSTRING">nothing has happened yet...</output>
<span class="verticalTrackerLine"></span>
<div id="chart1" class="chart">Chart 1</div>
<div id="chart2" class="chart">Chart 2</div>
答案 1 :(得分：1)
您可以进一步简化它：
:after元素内的chart 伪元素中，并将其 position 在chart 使用以下命令将其顶部和底部再定位10px：
top: -10px;
bottom: -10px;
opacity: 0设置为跟踪线，并在:hover上将其设置为1-现在您将鼠标悬停在该行上-参见下面的演示：
.chart {
margin-top: 30px;
width: 100px;
height: 30px;
border: 1px solid black;
background-color: red;
position: relative;
box-sizing: border-box;
}
.chart:after {
content: '';
border-left: 2px dashed rgb(68, 74, 79);
position: absolute;
z-index: 1;
opacity: 0;
top: -10px;
bottom: -10px;
}
.chart:hover:after {
opacity: 1;
}<div id="chart1" class="chart">Chart 1</div>
<div id="chart2" class="chart">Chart 2</div>
现在出现了 javascript部分-我们可以修改left属性以显示用鼠标移动的行：
首先添加一个可以从JS进行调整的 CSS变量（例如--left）
现在在mousemove侦听器中，您可以使用e.pageX - this.offsetLeft获取框内鼠标的相对位置（值left）。
使用--left
document.documentElement.style.setProperty('--left', ... CSS变量
请注意，我为left设置了一个 maximum 值，以便放在this.offsetWidth - 2的安全位置。
请参见下面的演示
$(".chart").mousemove(function (e) {
document.documentElement.style.setProperty('--left', Math.min(e.pageX - this.offsetLeft, this.offsetWidth - 2) + 'px');
});:root {
--left: 0;
}
.chart {
margin-top: 30px;
width: 100px;
height: 30px;
border: 1px solid black;
background-color: red;
position: relative;
box-sizing: border-box;
}
.chart:after {
content: '';
border-left: 2px dashed rgb(68, 74, 79);
position: absolute;
z-index: 1;
opacity: 0;
top: -10px;
bottom: -10px;
left: var(--left);
}
.chart:hover:after {
opacity: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart1" class="chart">Chart 1</div>
<div id="chart2" class="chart">Chart 2</div>
答案 2 :(得分：1)
将pointer-events: none;添加到.verticalTrackerLine
//$(document).ready(function() {
function showVerticalLine(e) {
var topBarHeight = 56;
var bottomHeight = 100;
var posX = $(this).offset().left;
var x = e.pageX;
var y = $(window).innerHeight();
//Change line so that it appears at the position of the cursor
$('.verticalTrackerLine').css({
'opacity': '1',
'left': x,
'top': topBarHeight,
'height': y - topBarHeight - bottomHeight + "px",
'transition': 'left 0.1s'
});
//Update string to show when the charts are being hovered over
$("#testSTRING").html('you are moving/hovering');
};
function hideVerticalLine(){
//Hide the line
$('.verticalTrackerLine').css({
'opacity': '0'
});
//Update string to show when the charts are being hovered over
$("#testSTRING").html('you have left');
}
$("#chart1").add("#chart2").mousemove(showVerticalLine);
$("#chart1").add("#chart2").mouseout(hideVerticalLine);
//}).chart {
margin-top: 30px;
width: 100px;
height: 30px;
border: 1px solid black;
background-color: red;
}
.verticalTrackerLine {
border-left: 2px dashed RGB(68,74,79);
position: fixed;
z-index: 1;
opacity: 0;
pointer-events: none;
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<SPAN id="testSTRING"></SPAN>
<SPAN class="verticalTrackerLine"></SPAN>
<DIV id="chart1" class="chart">Chart 1</DIV>
<DIV id="chart2" class="chart">Chart 2</DIV>
</head>