Question

这里的第5篇帖子。我最近在我的投资组合页面上进行了导航更新：

从那以后，我无法点击链接，我的悬停在链接/ i类项目无法正常工作。它可能与z-index有关吗？我不知道它可能是什么。 html / css / js对于stackoverflow来说太长了所以我把它放在jsfiddle：jsfiddle repo

导航菜单

#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;
}

nav 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>

Answer 1

看起来您的“#welcome .hero”正在覆盖该页面。我真的没有在页面上看到它的使用。也许删除它，因为它看起来不像你将使用英雄形象？

Answer 2

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

Answer 3

你错过了

中的冒号

#menu li hover{
  color: #fff;
}

应该是：

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

希望有所帮助。

Answer 4

我不知道它应该如何看，但如果你将标题位置更改为绝对（而不是固定），链接就可以正常工作。

我的按钮＆amp;链接悬停停止工作

4 个答案: