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

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/ 有人可以帮我吗？

Answer 1

现在，您的except Exception as e: print(e) 规则是根据.active将a向下和向右平移。它还在左侧和顶部添加了红色实线边框，我不确定您打算这样做。我已删除了您当前的transform: translate(100%, 50%);规则，并在当前的悬停规则中添加了以下2个选择器以显示2个边框。

.active

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