Question

我正在开发http://hcldesign.co.uk/的网站，并添加了我找到的导航菜单效果，并使用CSS将其整合到我的网站上。

唯一的问题是当我点击菜单项然后悬停效果也显示在当前/活动页面/菜单项上时，我无法弄清楚如何保持悬停效果。当我添加代码时，我认为应该是这样的：Active会打破菜单悬停效果。

用于菜单的当前代码位于

之下

    `a:focus {
    color: #c9c9c9 !important;
    text-decoration: none;
    }

     #menu-primary-menu {
     font-family: 'roboto', roboto, roboto;
     text-align: center;
     text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
}
#menu-primary-menu * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
#menu-primary-menu li {
  display: inline-block;
  list-style: outside none none;
  margin: 0em 1.5em;
  padding: 0;
}
#menu-primary-menu a {
  padding: 0.25em 0;
  color: #fff;
  position: relative;
  text-decoration: none;
  display: inline-block;
}
#menu-primary-menu a:before,
#menu-primary-menu a:after {
  height: 3px;
  position: absolute;
  content: '';
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  background-color: #3588dc;
  width: 0;
}
#menu-primary-menu a:before {
  top: 0;
  left: 0;
}
#menu-primary-menu a:after {
  bottom: 0;
  right: 0;
}
#menu-primary-menu a:hover {
    color: #fff;
}

#menu-primary-menu .active a {
  color: #fff;
}


#menu-primary-menu a:hover:before,
#menu-primary-menu .current a:before,
#menu-primary-menu a:hover:after,
#menu-primary-menu .current a:after {
  width: 100%;
}

#menu-primary-menu a {
font-size: 14px;
margin: -10px
}

任何帮助将不胜感激。

由于

Answer 1

为每个<body id="mypage-one">提供一个ID。您还必须为<nav>项<li id="nav-page-one">提供ID。

如果你现在以这种方式进入你的css，你会得到你想要的效果。

#mypage-one, #nav-page-one {
    background-color: #2a88bd;
}

#mypage-two, #nav-page-two {
    background-color: #2a88bd;
}

如果您的逗号分隔的css选择器现在匹配，您将background-color设置为#2a88bd或者您的悬停效果如何。

希望你会成功。

Answer 2

我认为当你使用滚动导航时，如上所述很难做到。您可以使用jQuery来实现目标。看看这个代码栈是如何工作的：

https://codepen.io/anon/pen/EvXVXm

$('.link').on('click', function(event) {
  $('.link').removeClass('active');
  $target = $(event.target);
  $target.addClass('active');
});

我认为这会有所帮助。

此致

CSS Nav Menu设置对当前项目的影响

2 个答案: