Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

将position: relative;添加到a

＆＃13;

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

＆＃13;

<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>

＆＃13;

另外，您的标记也不正确，因为li只能属于ul或ol元素。我修改了标记，将div s切换为ul s（反之亦然），使其成为有效的HTML。

应用于父元素而不是选定元素的效果

1 个答案: