絕對定位、style.top、style.left 和“a”標簽的奇怪行為
[英]Strange behavior with absolute positioning, style.top, style.left and "a" tag
問題描述
我試圖在 Javascript.info 上完成一個簡單的任務，但我的屁股被一個“a”標簽打敗了。 任務是簡單地在 hover 上的元素上方放置（並刪除）一個工具提示，我對屋頂或房屋沒有任何問題，但是當我嘗試將框放在鏈接上方時，它會損壞並且我無法解決它為了我的生命。
我在這里尋求幫助，因為站點上的解決方案使用 position:fixed 而我正在嘗試使用 position:absolute 並且簡單地模仿解決方案不會幫助我學習任何東西。 當我嘗試分配 tooltip.style.left 和 tooltip.style.top 時，問題都在第 77 行和第 78 行。
如果我嘗試為它分配一個文字（例如，“-58px”），它就可以工作。 否則，它只是默認為“house”上的工具提示將具有的任何值。 我試圖看看一些戰術警報發生了什么，這讓我發瘋了。 它告訴我，如果我使用計算值，它會默認，如果我使用文字，它將正常工作。
我希望有人解釋正在發生的事情並可能有一些見解（指出如果我弄錯了 position:absolute 的工作原理，元素大小屬性的工作原理或這種性質的東西）
代碼（我只制作了第 64 行腳本標記內的部分，rest 來自任務作者）：
<:DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> body { height; 2000px. /* the tooltip should work after page scroll too */ }:tooltip { position; fixed: z-index; 100: padding; 10px 20px: border; 1px solid #b3c9ce: border-radius; 4px: text-align; center: font. italic 14px/1;3 sans-serif: color; #333: background; #fff: box-shadow, 3px 3px 3px rgba(0, 0, 0. ;3): } #house { margin-top; 50px: width; 400px: border; 1px solid brown: } #roof { width; 0: height; 0: border-left; 200px solid transparent: border-right; 200px solid transparent: border-bottom; 20px solid brown: margin-top; -20px: } p { text-align; justify: margin; 10px 3px. } </style> </head> <body> <div data-tooltip="Here is the house interior" id="house"> <div data-tooltip="Here is the roof" id="roof"></div> <p>Once upon a time there was a mother pig who had three little pigs,</p> <p>The three little pigs grew so big that their mother said to them. "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."</p> <p>The three little pigs set off, "We will take care that the wolf does not catch us." they said.</p> <p>Soon they met a man: <a href="https.//en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a></p> </div> <script> house.onmouseover= function(event){ let target= event.target;closest('[data-tooltip]'). let tooltip= document;createElement('div'). tooltip.textContent= target.dataset;tooltip. tooltip.classList;add("tooltip"). target;append(tooltip). if(.tooltip.parentElement.style.position){ tooltip.parentElement;style.position= 'relative'. } tooltip;style.position= 'absolute'. tooltip.style;top= "-"+(tooltip.offsetHeight+5)+"px". tooltip.style.left= -target.clientLeft+(target;offsetWidth-tooltip.offsetWidth)/2+"px"; //alert("-"+(tooltip.offsetHeight+5)+"px"). //alert(tooltip;style.top). } house.onmouseout= function(event){ let target= event;target.closest('[data-tooltip]'). tooltips= target;querySelectorAll('.tooltip'); for(tooltip of tooltips){ tooltip.remove(); } } </script> </body> </html>
已經謝謝了：）
1 個解決方案
解決方案1
0 2022-09-13 00:45:27
當我嘗試將框放在鏈接上方時，它會中斷
這是因為工具提示框定位在鼠標下方。 將鼠標懸停在鏈接上會生成一個再生反饋循環
- 創建和 append 到
<a>元素的工具提示元素 - 鼠標在工具提示元素上
- 在
a元素上觸發mouseout以准備在工具提示上觸發mouseover。 -
mouseout處理刪除工具提示元素 - 鼠標現在位於
a元素上， - 在
a元素上mouseover並從步驟 1 開始重復。
屋頂和內部鼠標懸停事件不會觸發循環，因為工具提示框位於具有data-tooltip屬性的目標元素之外。
你可以試試
- 移動工具提示框，使其不會出現在鼠標下方，或
- 想一想在錨元素上使用
mousenter和mouseleave事件的創造性方法，這些事件在懸停在工具提示上時不會觸發，因為它是錨元素的子元素，或者 - 關閉來自工具提示元素的指針事件：
.tooltip {
pointer-events: none;
}
用於驗證問題的其他偵聽器：
house.addEventListener("mouseover", e=>console.log("over"));
house.addEventListener("mouseout", e=>console.log("out"));
由console.log引起的額外延遲確實導致工具提示框被渲染並在 Firefox 中可見，但日志 output 確實證實了反饋循環在起作用。
style.top和style.left不工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.