html - CSS :hover Twitching

Question

我对 CSS 中的 :hover 有疑问。

这是我的导航菜单 HTML 代码:

<div class="nav">
    <a href="2d.html" class="nav1">2D</a>
    <br>
    <a href="3d.html" class="nav2">3D</a>
</div>

这是 CSS 代码:

.nav {
position: absolute;
font-family: 'Oswald', sans-serif;
font-weight: 900;
font-size: 50px;
letter-spacing: 5px;
z-index: 20;
color: white;
float: right;
direction: rtl;
top: 50%;
right: 100px;
margin-top: -120px;

.nav1 {
text-decoration: none;
position: relative;
color: #43A3E8;
left: 0;
transition: left ease 0.5s;

.nav1:hover{
left: -35px;

.nav2 {
text-decoration: none;
position: relative;
color: #C944F5;
left: 0;
transition: left ease 0.5s;

.nav2:hover{
left: -35px;

现在，当光标处于错误位置时，“2D”和“3D”文本会抖动(一半在文本上，一半在空白处)。我知道这是一个常见问题，我用谷歌搜索了它，但我无法将它应用到我的代码中......

如果有人能帮助我，那就太好了!

谢谢!

Answer 1

首先，确保在每个 CSS 声明的末尾添加右括号。

转换您的 <a>标记跨度，并将导航内容保留在其中。

将链接移动到 span 的左侧并为其指定一个新类。然后，您可以将其放置在导航项之上，并使其成为整个过渡的宽度。设置样式使背景透明。

最后，编辑悬停 CSS，以便当您将鼠标悬停在叠加层上时，它会激活过渡。

/* OVERLAYS */

.overlay-one {
  position: absolute;
  background-color: transparent;
  top: 50%;
  margin-top: -55px;
  height: 50px;
  width: 150px;
  z-index: 1000000;
}

.overlay-two {
  position: absolute;
  background-color: transparent;
  top: 50%;
  margin-top: 15px;
  height: 50px;
  width: 150px;
  z-index: 1000000;
}


/***********/

.nav {
  position: absolute;
  font-family: 'Oswald', sans-serif;
  font-weight: 900;
  font-size: 50px;
  letter-spacing: 5px;
  z-index: 20;
  color: white;
  float: right;
  direction: rtl;
  top: 50%;
  right: 100px;
  margin-top: -120px;
}

.nav1 {
  text-decoration: none;
  position: relative;
  color: #43A3E8;
  left: 0;
  transition: left ease 0.5s;
}


/* HOVER CODE */

.overlay-one:hover+.nav1 {
  left: -35px;
}

.nav2 {
  text-decoration: none;
  position: relative;
  color: #C944F5;
  left: 0;
  transition: left ease 0.5s;
}

.overlay-two:hover+.nav2 {
  left: -35px;
}

<div class="nav">
  <a href="2d.html" class="overlay-one"></a><span class="nav1">2D</span>
  <br>
  <a href="3d.html" class="overlay-two"></a><span class="nav2">3D</span>
</div>