我将如何在伪元素上永久应用 CSS 过渡/效果

臭名昭著

不确定我是否为此使用了完全错误的方法，但我想知道如何在悬停时永久应用效果，如果单击该项目，但对于伪元素。

我已经设置了一个选项卡样式菜单，其中将根据当前选择的选项卡打开一个新页面，并且我还设置了我希望它在悬停时应用的过渡/效果，但是，我希望它在悬停时保持在悬停效果上用户点击它。如果用户决定单击不同的选项卡，它还需要删除该效果并应用于不同的选项卡。

虽然我了解在 jquery 中添加类的基本操作，但我并不真正了解如何使用伪元素来实现。

这是我从我的项目中删除的一些代码以简化代码段：

body {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, p {
  margin: 0;
  padding: 0;
}

div#navigator div {
  flex-grow: 1;
}

#navigator {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.15);
  /* backdrop-filter: blur(5px); */
}

.test-title{
  color: rgba(255, 255, 255, 1);
  font-size: 3.5em;
  text-align: center;
  user-select: none;
  transition: color 0.18s;
}

.test-title:hover {
  color: white;
}

.test-title::after{
  display: block;
  transition: transform ease 0.25s;
  content: "";
  margin: 0 15% 0 15%;
  text-align: center;
  border-bottom: solid 2px green;
  border-radius: 1px 1px 1px 1px;
  transform: scaleX(0);
  letter-spacing: 1px;
  transform-origin: 100% 0%;
}

.test-title:hover::after{
  transform: scaleX(1);
  transform-origin: 0% 50%;
}

<div id="navigator">
      <div id="tes1" class="test"><h1 class="test-title">test1</h1></div>
      <div id="test2" class="test"><h1 class="test-title">testing2</h1></div>
      <div id="test3" class="test"><h1 class="test-title">testimus3</h1></div>
 </div>

风

您需要添加一些 Javascript 和 CSS。我为你做了一个片段

document.querySelectorAll('.test').forEach(element => {
  element.addEventListener('click', () => {
  document.querySelectorAll('.test').forEach(element2 => element2.classList.remove('active'))
    element.classList.add('active')
  })
})

body {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, p {
  margin: 0;
  padding: 0;
}

div#navigator div {
  flex-grow: 1;
}

#navigator {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.15);
  /* backdrop-filter: blur(5px); */
}

.test-title{
  color: rgba(255, 255, 255, 1);
  font-size: 3.5em;
  text-align: center;
  user-select: none;
  transition: color 0.18s;
}

.test-title:hover,
.test.active {
  color: white;
}

.test-title::after{
  display: block;
  transition: transform ease 0.25s;
  content: "";
  margin: 0 15% 0 15%;
  text-align: center;
  border-bottom: solid 2px green;
  border-radius: 1px 1px 1px 1px;
  transform: scaleX(0);
  letter-spacing: 1px;
  transform-origin: 100% 0%;
}

.test-title:hover::after{
  transform: scaleX(1);
  transform-origin: 0% 50%;
}

.test.active .test-title::after {
   transform: scaleX(1);
  transform-origin: 0% 50%;
}

.test.active > h1 {
  transform: scaleX(1);
  transform-origin: 0% 50%;
}

<div id="navigator">
      <div id="tes1" class="test"><h1 class="test-title">test1</h1></div>
      <div id="test2" class="test"><h1 class="test-title">testing2</h1></div>
      <div id="test3" class="test"><h1 class="test-title">testimus3</h1></div>
 </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。