Javascript 我的按钮及；链接悬停停止工作

这里是第五站。我最近在我的投资组合页面上更新了nav：

从那以后，我就不能点击链接，我的鼠标悬停在链接上/I类项目也不起作用。这可能与z指数有关吗？我不知道那可能是什么。html/css/js对于stackoverflow来说太长了，所以我把它放在JSFIDLE上：

导航菜单

#menuToggle a
{
  text-decoration: none;
  color: #232323;

  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: #fff;
}

#menuToggle
{
  display: block;
  position: relative;
  top: 50px;
  left: 50px;

  z-index: 10;

  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;

  cursor: pointer;

  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */

  -webkit-touch-callout: none;
}


#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;

  background: #f91791;
  border-radius: 3px;

  z-index: 3;

  transform-origin: 4px 0px;

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}


#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}


#menuToggle input:checked ~ span:nth-last-child(2)
{
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}


#menu
{
  position: absolute;
  width: 1600px;
    height: 1600px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;

  background: #f91791;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */

  transform-origin: 0% 0%;
  transform: translate(-100%, 0);

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li{
  padding: 10px 0;
  font-size: 115px;
}

#menu li hover{
  color: #fff;
}

#menuToggle input:checked ~ ul
{
  transform: scale(1.0, 1.0);
  opacity: 1;
}

导航html

<section id="welcome">
        <header class="close">
            <nav role='navigation' id="menuToggle">
                    <input type="checkbox" />
                    <span></span>
                    <span></span>
                    <span></span>
                        <ul id="menu">
                            <li><a href="#welcome">Home</a></li>
                            <li><a href="#about">About Me</a></li>
                            <li><a href="#portfolio">Testimonials</a></li>
                            <li><a href="#resume">Portfolio</a></li>
                            <li><a href="#contactMe">Contact Me</a></li>
                        </ul>
                  </div>
                </nav>
        </header>

看起来你的“#welcome.hero”正在覆盖页面。我在页面上看不到它在使用。可能会删除它，因为它看起来不像您要使用英雄图像？

它看起来像您的“#welcome.hero”正在覆盖页面。我在页面上看不到它在使用。可能会删除它，因为它看起来不像是要使用英雄图像？

如果右键单击页面并单击“检查元素”，您将看到一些404错误。我怀疑页面无法找到这些文件，您正在丢失其中的功能。

如果您右键单击页面并单击“检查元素”，您将看到一些404错误。我怀疑页面找不到这些文件，并且您正在丢失其中的功能。

您丢失了文件中的冒号

#menu li hover{
  color: #fff;
}

应改为：

#menu li:hover{
  color: #fff;
}

---

希望这能有所帮助。

你的结肠缺失了

#menu li hover{
  color: #fff;
}

应改为：

#menu li:hover{
  color: #fff;
}

---

---

希望这能有所帮助。

我不知道它应该是什么样子，但如果你将标题位置改为绝对（而不是固定），链接会正常工作。

我不知道它应该是什么样子，但如果你将标题位置改为绝对（而不是固定），链接会正常工作。

从你的h1中删除“z-index:1”；或者相反，如果您还没有定义z=index:0，请添加它。我尝试了这个方法，但没有成功。我确实像安东尼建议的那样拿出了英雄卡。你之前没有可以回滚的承诺吗？代码非常庞大，很难知道我们在寻找什么。你对导航做了什么具体的改变？另外，您正在调用2个不同的jquery CDN；此外，您应该真正连接您的脚本，您有十几个脚本。恕我直言，这一页的编码和一般的wordpress页面一样雄辩。。再一次，大海捞针。。在这里回溯您的更改，回滚并测试；拥有存储库的乐趣@到目前为止，拉弗里什提出了5个问题。。其中4个叫你“noob”。。你还没有接受答案！感谢别人是不够的。学会接受一个答案，人们希望获得声誉，这就是为什么。要接受答案，请将鼠标悬停在最佳答案旁边，然后会出现一个复选标记。单击它，它将变为绿色。回答者得15分，你得2分。当你有15个代表时，你也可以投票支持别人。你可以在每个问题上投票选出你喜欢的答案，但每个问题只接受1个。去做吧！从h1中删除“z索引：1”；或者相反，如果您还没有定义z=index:0，请添加它。我尝试了这个方法，但没有成功。我确实像安东尼建议的那样拿出了英雄卡。你之前没有可以回滚的承诺吗？代码非常庞大，很难知道我们在寻找什么。你对导航做了什么具体的改变？另外，您正在调用2个不同的jquery CDN；此外，您应该真正连接您的脚本，您有十几个脚本。恕我直言，这一页的编码和一般的wordpress页面一样雄辩。。再一次，大海捞针。。在这里回溯您的更改，回滚并测试；拥有存储库的乐趣@到目前为止，拉弗里什提出了5个问题。。其中4个叫你“noob”。。你还没有接受答案！感谢别人是不够的。学会接受一个答案，人们希望获得声誉，这就是为什么。要接受答案，请将鼠标悬停在最佳答案旁边，然后会出现一个复选标记。单击它，它将变为绿色。回答者得15分，你得2分。当你有15个代表时，你也可以投票支持别人。你可以在每个问题上投票选出你喜欢的答案，但每个问题只接受1个。去做吧！这有助于悬停！但是，标题中的欢迎我按钮仍然不起作用。酷。我再看看是什么原因引起的。很高兴你能在网络竞技场上跳跃。谢谢安东尼。我让按钮工作，但现在按钮文本显示在导航覆盖。哈哈，我赢不了。我对他们很满意，我更喜欢按钮的功能。我很好奇如何修理它。如果您想稍后查看，我确实在JSFIDLE中对其进行了更新。我真的很感谢你的帮助！欢迎崔西。尝试添加z索引：0；点击CSS中的“欢迎。欢迎。按钮”（以及任何其他行为不端的按钮）。这有助于鼠标悬停！但是，标题中的欢迎我按钮仍然不起作用。酷。我再看看是什么原因引起的。很高兴你能在网络竞技场上跳跃。谢谢安东尼。我让按钮工作，但现在按钮文本显示在导航覆盖。哈哈，我赢不了。我对他们很满意，我更喜欢按钮的功能。我很好奇如何修理它。如果您想稍后查看，我确实在JSFIDLE中对其进行了更新。我真的很感谢你的帮助！欢迎崔西。尝试添加z索引：0；到#welcome.welcome.button在您的CSS中（以及任何其他行为不端的按钮）。谢谢。我做了一些修改来修复它们。谢谢。我做了一些修改来修复它们。