javascript - 如何使用活动菜单项解决此问题

Question

我在菜单项上的活动课程有一个小问题。我正在尝试在活动菜单项周围添加边框，例如在此悬停状态下，但是当我尝试将其添加到我的菜单项时，一切都搞砸了。我试图为活动课程实现的是： 

.nav-menu {
  list-style: none;
  margin-top: 18px;
}

ol,
ul {
  margin-top: 0;
  margin-bottom: 10px;
}

.nav-menu li {
  float: left;
  border-left: 1px solid #1e3866;
  padding: 5px 10px;
}

.snip1189 li {
  display: inline-block;
  list-style: outside none none;
  padding: 0;
}

.snip1189 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

.nav-menu li a {
  color: #1e3866;
  font-size: 13px;
}

.snip1189 a {
  padding: 0.2em 0.5em;
  margin: 0.2em 0;
  display: block;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  text-decoration: none;
}

.snip1189 a:before,
.snip1189 a:after {
  height: 14px;
  width: 14px;
  position: absolute;
  content: '';
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  opacity: 0;
}

.snip1189 a:before {
  left: 0;
  top: 0;
  border-left: 2px solid #e52b25;
  border-top: 2px solid #e52b25;
  -webkit-transform: translate(100%, 50%);
  transform: translate(100%, 50%);
}

.snip1189 a:after {
  right: 0;
  bottom: 0;
  border-right: 2px solid #1d3768;
  border-bottom: 2px solid #1d3768;
  -webkit-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}

.snip1189 a:hover,
.snip1189 .current a {
  color: #4a4949;
  font-weight: bold;
}

.snip1189 a:hover:before,
.snip1189 .current a:before,
.snip1189 a:hover:after,
.snip1189 .current a:after {
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  opacity: 1;
}

.active {
  border-left: 2px solid #e52b25;
  border-top: 2px solid #e52b25;
  -webkit-transform: translate(100%, 50%);
  transform: translate(100%, 50%);
}

<div class="pull-right">
  <ul class="nav-menu snip1189">
    <li><a href="#">Home</a></li>
    <li><a href="#" class="active">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

另请参阅我的 jsfiddle 链接：https ://jsfiddle.net/pevabL5q/ 有人可以帮我吗？

标签： javascripthtmlcss

Answer 1

现在，您的.active规则是将aper 向下和向右平移transform: translate(100%, 50%);。它还在左侧和顶部添加了一个纯红色边框，我不确定你是否打算这样做。我已删除您当前的.active规则，并将以下 2 个选择器添加到当前悬停规则以显示 2 个边框。

.snip1189 a.active:before,
.snip1189 a.active:after,

.nav-menu {
  list-style: none;
  margin-top: 18px;
}

ol,
ul {
  margin-top: 0;
  margin-bottom: 10px;
}

.nav-menu li {
  float: left;
  border-left: 1px solid #1e3866;
  padding: 5px 10px;
}

.snip1189 li {
  display: inline-block;
  list-style: outside none none;
  padding: 0;
}

.snip1189 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

.nav-menu li a {
  color: #1e3866;
  font-size: 13px;
}

.snip1189 a {
  padding: 0.2em 0.5em;
  margin: 0.2em 0;
  display: block;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  text-decoration: none;
}

.snip1189 a:before,
.snip1189 a:after {
  height: 14px;
  width: 14px;
  position: absolute;
  content: '';
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  opacity: 0;
}

.snip1189 a:before {
  left: 0;
  top: 0;
  border-left: 2px solid #e52b25;
  border-top: 2px solid #e52b25;
  -webkit-transform: translate(100%, 50%);
  transform: translate(100%, 50%);
}

.snip1189 a:after {
  right: 0;
  bottom: 0;
  border-right: 2px solid #1d3768;
  border-bottom: 2px solid #1d3768;
  -webkit-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}

.snip1189 a:hover,
.snip1189 .current a {
  color: #4a4949;
  font-weight: bold;
}

.snip1189 a.active:before, /* added this line */
.snip1189 a.active:after, /* added this line */
.snip1189 a:hover:before,
.snip1189 .current a:before,
.snip1189 a:hover:after,
.snip1189 .current a:after {
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  opacity: 1;
}

<div class="pull-right">
  <ul class="nav-menu snip1189">
    <li><a href="#">Home</a></li>
    <li><a href="#" class="active">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>