CSS :hover 抽搐答案

【问题标题】：CSS :hover TwitchingCSS :hover 抽搐
【发布时间】：2020-04-25 06:21:21
【问题描述】：

我有一个关于 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”文本在光标处于错误位置时会抽搐（一半在文本上，一半在空白处）。我知道这是一个常见问题，我已经用谷歌搜索了它，但我无法将它应用到我的代码中......

如果有人可以帮助我，那就太棒了！

谢谢！

【问题讨论】：

标签： html css navigation hover

【解决方案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>

【讨论】：