在悬停在多个元素上时显示垂直跟踪线

时间：2019-03-27 10:33:23

标签： javascript jquery html css css3

我想显示一条垂直线，该垂直线将在和的图表悬停时出现，并且在鼠标退出图表元素时消失。奇怪的是，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>

我们将不胜感激地收到任何帮助/建议。

3 个答案:

答案 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>

相关问题
最新问题