我試圖撰寫 JS 代碼以在用戶將游標懸停在元素上時突出顯示元素。為了實作它，我試圖在當前檔案中第一個標簽“nav”的每個孩子上添加 eventListener：
let navigation = document.getElementsByTagName("nav");
elements = navigation[0].children;
for (element in elements) {
elements[element].addEventListener("mouseenter", function(event) {
event.target.style.color = "#ffbf00";
event.target.style.textShadow = "0px 0px 20px #ffbf00";
setTimeout(function() {
event.target.style.color = "";
event.target.style.textShadow = "0 0 5px #a50068";
}, 500);
}, false);
}
但是當我在瀏覽器中打開它時，不僅它不起作用，而且 Chrome 在 DevTools 中說變數“導航”未定義。我究竟做錯了什么？
uj5u.com熱心網友回復：
使用 CSS 可以更輕松地完成此操作：
nav>*:hover {
color: #ffbf00;
text-shadow: 0px 0px 20px #ffbf00;
}
至于你的JS：
- 向您的標簽添加
type="module"或defer屬性，<script>否則在執行腳本時不會加載您的 DOM，并且它不會找到您的nav元素。 - 您應該使用
for (const element of elements)（而不是in）遍歷專案。
uj5u.com熱心網友回復：
您的 JavaScript 代碼有效，但需要進行兩次更正。
- 將您的腳本塊移動到頁面的末尾。該腳本需要在您的導航塊在頁面上呈現之后出現，否則它將找不到它們。
- “元素”是一個 HTMLCollection，最好使用常規的 for-next 回圈。請參閱：HTMLCollection 元素的 For 回圈
運行下面的示例以查看您的代碼在進行這些細微更改后是否正常作業。
正如其他人所說，對于此類作業，使用 css 而不是 JavaScript 可能更容易。您可以在此處了解更多相關資訊：https : //developer.mozilla.org/en-US/docs/Web/CSS/ : hover
let navigation = document.getElementsByTagName("nav");
elements = navigation[0].children;
// remove these 2 lines
// for (element in elements) {
// elements[element].addEventListener("mouseenter", function(event) {
for(var i = 0; i < elements.length; i ) {
elements[i].addEventListener("mouseenter", function(event) {
event.target.style.color = "#ffbf00";
event.target.style.textShadow = "0px 0px 20px #ffbf00";
setTimeout(function() {
event.target.style.color = "";
event.target.style.textShadow = "0 0 5px #a50068";
}, 500);
}, false);
}<h4>A haiku poem by Matsuo Basho</h4>
<nav>
<p>An old silent pond...</p>
<p>A frog jumps into the pond,</p>
<p>splash! Silence again.</p>
</nav>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/371118.html
標籤：javascript html