如何使用 Javascript 識別 HTML 元素的選擇器？

Question

我正在構建一個導航欄，如果您將鼠標懸停在導航欄中的a項目上，它將添加一個名為nav-hover的類，該類nav-hover時為a添加特定樣式。

讓我知道是否有更好的方法來實現這一點，但是在每個li ，我在navIn()````. Which method can I use that would automatically extract the selector. Using添加了它的唯一選擇器navIn()````. Which method can I use that would automatically extract the selector. Using navIn()````. Which method can I use that would automatically extract the selector. Using navIn()````. Which method can I use that would automatically extract the selector. Using這個```不起作用。

 function navIn(obj) { document.querySelector(obj).classList.add('nav-hover'); } function navOut(obj) { document.querySelector(obj).classList.remove('nav-hover'); }

 <div class="navbar" id="navbar"> <div class="container" id="nav-position"> <ul class="nav"> <li onmouseover="navIn('#nav-position > ul > li:nth-child(1)')" onmouseout="navOut('#nav-position > ul > li:nth-child(1)')"><a data-scroll href="#about">About</a></li> <li onmouseover="navIn('#nav-position > ul > li:nth-child(1)')" onmouseout="navOut('#nav-position > ul > li:nth-child(2)')"><a data-scroll href="#work">My Work</a></li> <li onmouseover="navIn('#nav-position > ul > li:nth-child(1)')" onmouseout="navOut('#nav-position > ul > li:nth-child(3)')"><a data-scroll href="#">Resume</a></li> <li onmouseover="navIn('#nav-position > ul > li:nth-child(1)')" onmouseout="navOut('#nav-position > ul > li:nth-child(4)')"><a data-scroll href="#contact">Contact</a></li> </ul> </div> </div>

Answer 1

您可以使用:hover偽類來實現相同的懸停效果：

編輯：您可以僅使用 CSS 實現下划線效果。 您可以使用pseudo-elements創建下划線並對其應用過渡效果，如下所示：

 * { margin: 0; padding: 0; } a { color: black; text-decoration: none; } ul { list-style: none; display: flex; align-items: center; justify-content: space-around; height: 70px; background: rgba(0, 0, 0, 0.25); } /* Set the position on your <a> tag so the pseudo-element will position relative to it. */ .nav-link { position: relative; } /* Create the underline element for each <a> tag */ .nav-link::before { content: ''; position: absolute; bottom: -10px; left: 0; width: 100%; height: 2px; background: blue; transform: scaleX(0); transform-origin: right; transition: transform 300ms ease; } /* Apply the :hover pseudo-class on the pseudo-elements */ .nav-link:hover::before { transform: scaleX(1); transform-origin: left; }

 <nav> <ul class="nav"> <li><a class="nav-link" href="#">About</a></li> <li><a class="nav-link" href="#">My Work</a></li> <li><a class="nav-link" href="#">Resume</a></li> <li><a class="nav-link" href="#">Contact</a></li> </ul> </nav>