CSS :悬停抽搐

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>标签转换为范围，并将导航内容保留在其中。

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

最后，编辑悬停 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>