在懸停在多個元素上時顯示垂直跟蹤線
[英]Show vertical tracking line on hover over multiple elements
問題描述
我想顯示一條垂直線，該垂直線將在和的圖表懸停時出現，並在鼠標退出圖表元素時消失。 奇怪的是，當鼠標不移動或上下移動（而不是左右移動）時，會觸發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 個解決方案
解決方案1
2 已采納 2019-03-27 12:40:21
當您將鼠標懸停在實際行上而干擾將鼠標懸停在按鈕上時，您的猜測是正確的。 因此，只需添加pointer-events: none; 到.verticalTrackerLine選擇器的位置將解決此問題，從而使鼠標與該行完全沒有交互。
我還對您的代碼做了一些小的JS清理，沒什么大的。 CSS規則transition: left 0.1s每次鼠標移動時都不需要重新應用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>
解決方案2
1 2019-03-27 12:34:26
您可以進一步簡化它：
- 將跟蹤線移到每個
chart元素內的:after偽元素中，並將其絕對 定位在chart 使用以下命令將其頂部和底部再定位10px：
top: -10px; bottom: -10px;- 將
opacity: 0設置為跟蹤線，並在:hover上將其設置為:hover現在您將在懸浮線上設置該線-參見下面的演示：
.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屬性以顯示用鼠標移動的線：
首先添加一個CSS變量 （例如
--left），該變量可以從JS進行調整現在，在
mousemove偵聽器中，您可以使用e.pageX - this.offsetLeft來獲取鼠標在框中的相對位置 （left值）。更新
--left使用CSS變量document.documentElement.style.setProperty('--left', ...請注意，我已經為
this.offsetWidth - 2安全起見，將left值設為最大值 。
請參見下面的演示：
$(".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>
解決方案3
1 2019-03-27 12:36:33
添加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>
如何在鼠標懸停時顯示帶有拉斐爾元素（圓形，線形）的上下文菜單
[英]how to show context menu with raphael elements (circle, line) on mouse hover
如何在一個圖表上 hover 以在 D3.js 的所有圖表上顯示垂直線和工具提示？
[英]How to hover over one chart to display a vertical line and tooltip on all charts in D3.js?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.