JavaScript 鼠标悬停高亮显示列表项。

Question

基本上，我有一个带有导航项的

元素的
元素。使用JavaScript，我想改变我悬停时的列表项的颜色或背景颜色。我已经在w3测试工具中使其中一个项目（通过id）工作了，但如何对所有项目进行操作？


我的导航栏：


         <nav>
            <ul>
                <li><a href="home.html">Home </a></li>
                <li><a href="about.html"> About </a></li>
                <li><a href="experience.html"> Experience </a></li>
                <li><a href="contact.html"> Contact </a></li>
            </ul>
        </nav>

（减去提交到发布页面的表单输入）

此外，我希望在我的js文件中完成所有工作，但我在W3中无法实现。

---

编辑

对于糟糕的帖子和代码提供方法，我深感歉意。

现在，我基于@Adam-Buchanan-Smith的回复开发了一个解决方案：

<nav>
      <ul>
           <li onmouseover="hover(this)" onmouseout="hoverOff(this)"><a href="home.html">Home </a></li>
           <li onmouseover="hover(this)" onmouseout="hoverOff(this)"><a href="about.html"> About </a></li>
           <li onmouseover="hover(this)" onmouseout="hoverOff(this)"><a href="experience.html"> Experience </a></li>
           <li onmouseover="hover(this)" onmouseout="hoverOff(this)"><a href="faq.html"> FAQ </a></li>
           <li onmouseover="hover(this)" onmouseout="hoverOff(this)"><a href="references.html"> References </a></li>
           <li onmouseover="hover(this)" onmouseout="hoverOff(this)"><a href="contact.html"> Contact </a></li>
       </ul>
</nav>

JS：

function hover(element)
{
    element.style.backgroundColor = "red";
}
function hoverOff(element)
{
    element.style.backgroundColor = "#000079";
}

它似乎可以工作，但是有人能解释一下为什么/如何使用JS的

style.backgroundColor

来更改颜色，而CSS使用：

background-color:

JavaScript使用理由

我知道不使用CSS似乎很愚蠢，但我正在为最终项目做这个，教授想要JS。 不，我不是在让别人替我完成工作，我只是想要一些指导 - 谢谢。

- DevonRyder

---

为什么不直接分享你的代码，而要给我们一个代码截图呢？ - Adam Buchanan Smith

请提供我们一个代码片段 - Phoenix

为什么要使用JavaScript，而不是在CSS中使用li:hover？ - Nicholas Tibbs

也许你想要这个 https://dev59.com/dXHYa4cB1Zd3GeqPOral 或者这个 https://dev59.com/VGgu5IYBdhLWcg3wYGC3 - xale94

你最好关闭这个问题并创建一个新的。 - Adam Buchanan Smith

Answer 1

只需使用 CSS...

nav > ul > li a:hover {
  color: red;
}

<nav>
  <ul>
    <li><a href="home.html">Home </a></li>
    <li><a href="about.html"> About </a></li>
    <li><a href="experience.html"> Experience </a></li>
    <li><a href="contact.html"> Contact </a></li>
  </ul>
</nav>

在JS中这样做是愚蠢的，但如果你有某些原因必须这样做，那么有两种主要方法：

• 将事件处理程序附加到单个链接

[].forEach.call(document.querySelectorAll('nav > ul > li a'), function (link) {
    link.addEventListener('mouseover', coloringHandler);
    link.addEventListener('mouseout', decoloringHandler);
});

function coloringHandler() {
    this.dataset.initialInlineColor = this.style.color;
    this.style.color = 'red';
}

function decoloringHandler() {
    this.style.color = this.dataset.initialInlineColor;
}

    <nav>
      <ul>
        <li><a href="home.html">Home </a></li>
        <li><a href="about.html"> About </a></li>
        <li><a href="experience.html"> Experience </a></li>
        <li><a href="contact.html"> Contact </a></li>
      </ul>
    </nav>

• 使用事件委托，即在容器元素上附加监听器，并依赖事件冒泡或捕获来处理子元素事件（请注意，此事件委派实现是天真的）。

var nav = document.querySelector('nav');

nav.addEventListener('mouseover', withLinkEl(coloringHandler));
nav.addEventListener('mouseout', withLinkEl(decoloringHandler));

function coloringHandler() {
  
  this.dataset.initialInlineColor = this.style.color;
  this.style.color = 'red';
}

function decoloringHandler() {
  this.style.color = this.dataset.initialInlineColor;
}

function withLinkEl(fn) {
  return function (e) {
    if (e.target.tagName !== 'A') return;
    
    fn.call(e.target);
  };
}

<nav>
  <ul>
    <li><a href="home.html">Home </a></li>
    <li><a href="about.html"> About </a></li>
    <li><a href="experience.html"> Experience </a></li>
    <li><a href="contact.html"> Contact </a></li>
  </ul>
</nav>

- plalx

---

引用问题“使用JavaScript，我想要在悬停在列表项上时更改其颜色或背景颜色。”但这不是JavaScript :/ - Adam Buchanan Smith

@AdamBuchananSmith 在这种情况下，不清楚OP必须使用JavaScript来获得答案，很可能他们不知道使用CSS也可以实现。 - bwegs

我像楼主一样阅读了这个问题，使用教程并且背景颜色只是用来显示悬停事件。请看楼主提供的图片。 - Adam Buchanan Smith

@AdamBuchananSmith 好的，我更新了答案。 - plalx

@plalx，你更新后的问题现在符合原始问题了。看一下更新后的问题：“我知道不使用CSS似乎很傻，但我正在为最终项目做这个，教授想要JS。”<--- 仅通过阅读问题，我就弄清楚了这一点 :) - Adam Buchanan Smith

@AdamBuchananSmith 这是原帖作者在我回答之后进行的编辑... 我可不会预知未来 ;) - plalx

Answer 2

这里是使用JavaScript的代码：https://jsfiddle.net/5egjjv91/

<nav>
  <ul>
    <li onmouseover="changeTo(this)" onmouseout="changeBack(this)"><a href="home.html">Home </a></li>
    <li onmouseover="changeTo(this)" onmouseout="changeBack(this)"><a href="about.html"> About </a></li>
    <li onmouseover="changeTo(this)" onmouseout="changeBack(this)"><a href="experience.html"> Experience </a></li>
    <li onmouseover="changeTo(this)" onmouseout="changeBack(this)"><a href="contact.html"> Contact </a></li>
  </ul>
</nav>
<script>
  function changeTo(x) {
    x.style.backgroundColor = "red";
  }

  function changeBack(x) {
    x.style.backgroundColor = "white";
  }

</script>

- Adam Buchanan Smith

---

@ryderd 使用内联处理程序是一个可怕的解决方案...https://dev59.com/l2gt5IYBdhLWcg3w5har - plalx

@plalx，你真的想要那个正确的勾号吗？为什么你要和我争论这么久的解决方案，然后又说我是正确的，接着又建立了一个更好的答案，现在又回来试图改变OP的正确标记，为什么你不从一开始就直接回答问题呢？哈哈，好吧，拿我的答案，让它变得更好，然后再说我的坏话...小丑哈哈 - Adam Buchanan Smith

跟你争论解决方案？我并没有争论，我立刻同意了你的评论并相应地更新了我的答案。采用你的解决方案？我的解决方案和你的完全不同！我不确定你生活在哪个梦里。我不在乎得分，但我关心原帖作者的知识，这就是为什么我认为提到内联处理程序应该被避免是很重要的原因。 - plalx

你还没有理解重点，楼主的教授给了他一个例子，那个例子里面有内联处理程序，就像CSS是一种更好的方式一样，你的回答也是一种“更好”的方式，但它不是楼主所问的，你明白吗？！？！ - Adam Buchanan Smith

你在哪里看到教授给他的例子？题目里甚至没有提到那个例子。我猜你也是编造出来的... - plalx