當游標僅直接位于某些文本上方時，我想更改元素。例如 ：
Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。在此文本上而不是后面的空白處觸發事件。
我不想在游標位于 div 或段落以及空白空間上方時觸發此更改，例如本段末尾的空格。問題是元素以矩形形式形成并且包括這個空白空間。
我不知道這是否可能，我真的不知道什么時候開始。
uj5u.com熱心網友回復：
如以下鏈接所述：
注意：行內元素不會從新行開始，只占用必要的寬度。
將文本封裝在一個行內元素（如 a span）中，該元素不會像塊級元素那樣一直延伸到整個頁面，并mouseover在span.
document.querySelector("span").addEventListener("mouseover", function(){
console.log("You are over the text of the span");
});<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Trigger the event when on this text but not the blank space after.
</span>
</div>而且，如果您需要一個僅使用 JavaScript 的解決方案，我們可以更改displaya 的屬性div，使其作為行內元素流動：
const div = document.querySelector("div");
div.style.display = "inline"; // Make the div act like a span
div.addEventListener("mouseover", function(){
console.log("You are over the text of the div that is acting as an inline element");
});<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Trigger the event when on this text but not the blank space after.
</div>uj5u.com熱心網友回復：
確保包裝文本的元素設定為display: inline;，然后mouseover像這樣監聽事件：
let element = document.querySelector('.selector');
element.addEventListener('mouseover', () => {
// your code here.
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/496769.html
標籤：javascript 鼠标事件
下一篇：如何總結在提示中輸入的所有數字