修改

Question

基本上，我有一个<nav>元素，其中包含<ul>个导航项。使用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";
}

它似乎有效，但有人可以解释为什么/如何使用

style.backgroundColor

要改变颜色，CSS使用：

背景色：

JavaScript Usage Rational

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

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>

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>

Javascript悬停 - 突出显示列表项

修改

JavaScript Usage Rational

2 个答案: