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/ 有人可以帮我解决这个问题吗？

Answer 1

现在，您的 .active 规则正在根据 transform: translate(100%, 50%); 向下和向右翻译 a >。它还在左侧和顶部添加了实心红色边框，我不确定您打算这样做。我删除了您当前的 .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>