WordPress希伯来语RTL站点导航Indicator悬停闪烁问题求助

问题描述 #

站点采用希伯来语RTL（从右到左）布局，导航栏的指示器（#indicator）在鼠标悬停除第一个导航项外的其他项下方区域时，会出现来回闪烁的故障。

问题根源 #

当前代码中#indicator是所有<a>标签的兄弟元素，通过~选择器控制位置。当鼠标悬停到<a>上时，指示器移动到对应位置，但此时指示器处于<a>的视觉下方，鼠标实际悬停在指示器而非<a>上，导致<a>的hover状态丢失，指示器复位；复位后鼠标又回到<a>的hover区域，再次触发移动，循环往复造成闪烁。

解决方案 #

方案1：让指示器不响应鼠标事件 #

给#indicator添加pointer-events: none，使鼠标事件穿透到下方的<a>元素，保持hover状态不中断：

#indicator {
  position: absolute;
  right: 10%;
  bottom: 0;
  width: 5%;
  height: 3px;
  background-color: #aaa;
  border-radius: 5px;
  transition: 0.15s ease right;
  pointer-events: none; /* 添加此行 */
}

方案2：将指示器置于导航链接下方 #

设置z-index: -1，让指示器在<a>的层级下方，确保鼠标始终只hover到<a>上：

#indicator {
  position: absolute;
  right: 10%;
  bottom: 0;
  width: 5%;
  height: 3px;
  background-color: #aaa;
  border-radius: 5px;
  transition: 0.15s ease right;
  z-index: -1; /* 添加此行 */
}

注意：若导航容器nav有背景色，需确保背景色不遮挡指示器（如设置为透明）。

修复后的完整CSS（方案1示例） #

nav {
  background-color: #fff;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  width: 100%;
  display: table;
  transform: translateY(-50%);
  margin: 0 auto;
}

nav a {
  position: relative;
  width: 25%;
  display: table-cell;
  text-align: center;
  color: #444;
  text-decoration: none;
  font-family: Assistant;
  font-weight: light;
  padding: 10px 20px;
  transition: 0.4s ease color;
}

nav a:before,
nav a:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  transition: 0.5s ease transform;
}

nav a:before {
  top: 0;
  left: 37%;
  width: 6px;
  height: 6px;
}

nav a:after {
  top: 5px;
  left: calc(37% + 12px);
  width: 4px;
  height: 4px;
}

nav a:nth-child(1):before {
  background-color: rgb(255, 199, 44);
}

nav a:nth-child(1):after {
  background-color: rgb(216, 215, 195);
}

nav a:nth-child(2):before {
  background-color: rgb(216, 215, 195);
}

nav a:nth-child(2):after {
  background-color: rgb(125, 185, 179);
}

nav a:nth-child(3):before {
  background-color: rgb(125, 185, 179);
}

nav a:nth-child(3):after {
  background-color: rgb(22, 102, 120);
}

nav a:nth-child(4):before {
  background-color: rgb(22, 102, 120);
}

nav a:nth-child(4):after {
  background-color: rgb(14, 46, 59);
}

#indicator {
  position: absolute;
  right: 10%;
  bottom: 0;
  width: 5%;
  height: 3px;
  background-color: #aaa;
  border-radius: 5px;
  transition: 0.15s ease right;
  pointer-events: none;
}

nav a:hover {
  color: #0e2e3b;
}

nav a:hover:before,
nav a:hover:after {
  transform: scale(1);
}

nav a:nth-child(1):hover~#indicator {
  right: 85%;
  background: linear-gradient(130deg, rgb(255, 199, 44), rgb(216, 215, 195));
}

nav a:nth-child(2):hover~#indicator {
  right: 60%;
  background: linear-gradient(130deg, rgb(216, 215, 195), rgb(125, 185, 179));
}

nav a:nth-child(3):hover~#indicator {
  right: 35%;
  background: linear-gradient(130deg, rgb(125, 185, 179), rgb(22, 102, 120));
}

nav a:nth-child(4):hover~#indicator {
  right: 10%;
  background: linear-gradient(130deg, rgb(22, 102, 120), rgb(14, 46, 59));
}

内容的提问来源于stack exchange，提问作者JordanG8