1

你好，这是我的导航菜单代码，当我将鼠标悬停在导航菜单上时，我添加了像点一样移动的动画。但我不知道如何使该点在活动菜单中保持静态。

例如：（menu1）这是我的菜单，当它处于活动状态时，我希望在我的菜单（menu1.）旁边有那个点，如果有人找到解决方案，请给我代码 

body {
  font-family: "Sprint Sans Ofc";
}
.navMenu {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  White-space:nowrap;
  padding-right:20px;
  padding left:30px;
}

.navMenu a {
  color: #000000;
  text-decoration: none;
  font-size: 1.3em;
  text-transform: captilalize;
  font-weight: 600;
  display: inline-block;
  padding:30px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.navMenu a:hover {
  color: #000000;
}
.navMenu a:active {
    color:#000000;
}

.navMenu .dot {
  width: 5px;
  height: 5px;
  background: #D61E39;
  border-radius: 50%;
  opacity: 0;
  margin:-44px;
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.navMenu a:nth-child(1):hover ~ .dot {
  -webkit-transform: translateX(30px);
  transform: translateX(145px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}

.navMenu a:nth-child(2):hover ~ .dot {
  -webkit-transform: translateX(110px);
  transform: translateX(280px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}

.navMenu a:nth-child(3):hover ~ .dot {
  -webkit-transform: translateX(200px);
  transform: translateX(415px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}

.navMenu a:nth-child(4):hover ~ .dot {
  -webkit-transform: translateX(285px);
  transform: translateX(550px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}
navMenu a:nth-child(1):active ~ .dot {
  position: relative;
  left:40px;
  bottom:10px;
  opacity: 1;
}
.navMenu a:nth-child(1):active ~ .dot {
    left:20px;
    opacity:1;
}
<body>
    <nav class="navMenu">
      <a href="#">menu1</a>
      <a href="#">menu2</a>
      <a href="#">menu3</a>
      <a href="#">menu4</a>
      <div class="dot"></div>
    </nav>
  </body>

4

1 回答 1

0

.dot您的元素面临的挑战是以transform某种方式应用 CSS 样式（尤其是值），以正确处理hover和active状态。

为了实现这一点，我正在使用这样的 CSS 选择器：

.navMenu a:nth-child(2):hover~.dot,
.navMenu:not(:hover) a:nth-child(2).active~.dot {

基本上，这意味着，如果有的话，做动画

  • 该元素当前被悬停
  • 或者链接是活动的（即它之前被点击过），但限制是父.navMenu级当前没有被悬停。

第二条规则保证，hover在设置元素的目的地时 a 具有最高优先级.dot（特别是，这会使点远离当前活动的项目）。否则，点将不会移动并粘在.active菜单项上。

在下面查看我的方法（顺便说一句，这里不需要-webkit属性）：

const anchors = document.querySelectorAll('nav a')

anchors.forEach(anchor => anchor.addEventListener("click", onClick));

function onClick(e) {
  anchors.forEach(achor => achor.classList.remove('active'))
  e.target.classList.add('active')
}
body {
  font-family: "Sprint Sans Ofc";
}

.navMenu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  White-space: nowrap;
  padding-right: 20px;
  padding left: 30px;
}

.navMenu a {
  color: #000000;
  text-decoration: none;
  font-size: 1.3em;
  text-transform: captilalize;
  font-weight: 600;
  display: inline-block;
  padding: 30px;
  transition: all 0.2s ease-in-out;
}

.navMenu a:hover {
  color: #000000;
}

.navMenu a:active {
  color: #000000;
}

.navMenu .dot {
  width: 5px;
  height: 5px;
  background: #D61E39;
  border-radius: 50%;
  opacity: 1;
  margin: -44px;
  transform: translateX(-30px);
  transition: all 0.2s ease-in-out;
}

.navMenu a:nth-child(1):hover~.dot,
.navMenu:not(:hover) a:nth-child(1).active~.dot {
  transform: translateX(145px);
}

.navMenu a:nth-child(2):hover~.dot,
.navMenu:not(:hover) a:nth-child(2).active~.dot {
  transform: translateX(280px);
}

.navMenu a:nth-child(3):hover~.dot,
.navMenu:not(:hover) a:nth-child(3).active~.dot {
  transform: translateX(415px);
}

.navMenu a:nth-child(4):hover~.dot,
.navMenu:not(:hover) a:nth-child(4).active~.dot {
  transform: translateX(550px);
}
<body>
  <nav class="navMenu">
    <a href="#">menu1</a>
    <a href="#">menu2</a>
    <a href="#">menu3</a>
    <a href="#">menu4</a>
    <div class="dot"></div>
  </nav>
</body>

于 2022-01-30T21:16:37.297 回答