html - 应用于父元素而不是所选元素的效果

Question

如您所见，如果将鼠标悬停在 HOME 链接上，边框效果将覆盖整个 .left div 而不仅仅是主页链接。我知道我忽略了一些简单的事情。

ul {
  z-index: 101;
  list-style: none;
  position: relative;
  top: 60px;
  margin: 0;
  padding: 0;
  opacity: 1;
}
li {
  display: inline;
}
.left {
  display: inline-block;
  position: relative;
  left: 50px;
}
.left li {
  padding: 0 1.8em;
}
.right {
  display: block;
  position: relative;
  top: -27px;
  left: 840px;
}
.right li {
  padding: 0 1.8em;
}
li {
  z-index: 101;
  text-decoration: none;
  font-family: 'Raleway';
  font-weight: 500;
  color: black;
  font-size: 1.4em;
  line-height: 30px;
}
a {
  text-decoration: none;
  color: black;
  padding: 15px;
}
a::before,
a::after {
  content: '';
  position: absolute;
  transition: transform .5s ease;
}
.hoverbox::before,
.hoverbox::after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-color: #f7941e;
}
.hoverbox::before {
  border-width: 2px 0 2px 0;
  transform: scaleX(0);
}
.hoverbox::after {
  border-width: 0 2px 0 2px;
  transform: scaleY(0);
}
.hoverbox:hover::before,
.hoverbox:hover::after {
  transform: scale(1, 1);
}

<ul id="navbar">
  <div class="left">
    <li><a href="index.html" id="home" class="hoverbox">home</a>
    </li>
    <li><a href="about.html" id="about" class="">about</a>
    </li>
    <li><a href="services.html" id="services" class="">services</a>
    </li>
  </div>
  <div class="right">
    <li><a href="work.html" id="work" class="">work</a>
    </li>
    <li><a href="process.html" id="process" class="">process</a>
    </li>
    <li><a href="contact.html" id="contact" class="">contact</a>
    </li>
  </div>
</ul>

Answer 1

问题是您的伪元素没有相对于包含它们的 a 定位。要修复，请进行以下更改:

• 将position: relative;添加到a

ul {
  z-index: 101;
  list-style: none;
  position: relative;
  top: 60px;
  margin: 0;
  padding: 0;
  opacity: 1;
}
li {
  display: inline;
}
.left {
  display: inline-block;
  position: relative;
  left: 50px;
}
.left li {
  padding: 0 1.8em;
}
.right {
  display: block;
  position: relative;
  top: -27px;
  left: 840px;
}
.right li {
  padding: 0 1.8em;
}
li {
  z-index: 101;
  text-decoration: none;
  font-family: 'Raleway';
  font-weight: 500;
  color: black;
  font-size: 1.4em;
  line-height: 30px;
}
a {
  text-decoration: none;
  color: black;
  padding: 15px;
  position: relative;
}
a::before,
a::after {
  content: '';
  position: absolute;
  transition: transform .5s ease;
}
.hoverbox::before,
.hoverbox::after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-color: #f7941e;
}
.hoverbox::before {
  border-width: 2px 0 2px 0;
  transform: scaleX(0);
}
.hoverbox::after {
  border-width: 0 2px 0 2px;
  transform: scaleY(0);
}
.hoverbox:hover::before,
.hoverbox:hover::after {
  transform: scale(1, 1);
}

<div id="navbar">
  <ul class="left">
    <li><a href="index.html" id="home" class="hoverbox">home</a>
    </li>
    <li><a href="about.html" id="about" class="">about</a>
    </li>
    <li><a href="services.html" id="services" class="">services</a>
    </li>
  </ul>
  <ul class="right">
    <li><a href="work.html" id="work" class="">work</a>
    </li>
    <li><a href="process.html" id="process" class="">process</a>
    </li>
    <li><a href="contact.html" id="contact" class="">contact</a>
    </li>
  </ul>
</div>

顺便说一句，您的标记也不正确，因为 li 只能属于 ul 或 ol 元素。我修改了标记以将 div 切换为 ul(反之亦然)以使其成为有效的 HTML。