如何保持伪元素处于活动状态

时间：2017-12-28 12:58:29

标签： javascript jquery html css

我是编码的初学者，这是我的第一篇文章。

我可以制作我喜欢的链接按钮，除了一件事，我需要继续按下鼠标以获得所需的效果。我的意思是，如果我取消它，效果都会回来，这不是我想要的。我想停止效果并跳转到链接的网站。我想通过点击完成和稳定来发生效果。

我虽然解决它的简单方法是使用JQuery添加.active类，但是，JQuery无法选择伪元素，对我来说似乎非常复杂。 我只想＆＃34; ul li：之前，ul li：之后，ul li .fa＆＃34;拥有.active，我不想要其他元素，如＆＃34; ul li .fa＆＃34;拥有.active。

对不起我的不好解释。 但是，如果您可以帮助我，我会很感激，并希望向我展示完成的结果。

＆＃13;
＆＃13; 
@charset "utf-8";

body {
  margin: 0;
  padding: 0;
}
ul {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}

ul li { /*black border*/
  list-style: none;
  position: relative;
  width: 120px;
  height: 120px;
  background: #fff;
  margin: 0 20px;
  border: 2px solid #262626;
  box-sizing: border-box;
  border-radius: 50%;
  transition: .5s;
}

ul li .fa { /*arrengement of icons*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  font-size:  48px;
  color: #262626;
}
ul li:hover .fa { /*make icons white when hovered*/
  color: #fff;
  transition: .5s;
}

ul li:before { /*pink circles invisible due to opacity:0*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e91e63;
  border-radius: 50%;
  transform: scale(1);
  opacity: 0;
}
ul li:hover:before { /*show pink circles when hovered*/
  opacity: 1;
  transform: scale(.8);
  transition: .5s;
}

ul li:after { /*dotted borders invisible due to opacity:0*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  /* border: 2px dashed #262626; */
  box-sizing: border-box;
  border-top: 2px dashed #262626;
  border-right: 2px dashed #262626;
  border-left: 2px dashed #262626;
  border-bottom: 2px dashed #262626;
}
ul li:hover:after { /*display and rotate dotted borderes when hovered*/
  opacity: 1;
  animation: rotateborder 10s linear infinite;
}
@keyframes rotateborder {
  0% {
    transform: scale(0.92) rotate(0deg);
  }
  100% {
    transform: scale(0.92) rotate(360deg);
  }
}

ul li:active:before, ul li:active .fa { /*sublimate pink circles and icons when clicked*/
  transform: scale(20);
  opacity: 0;
  transition: 0.2s;
}
ul li:active:after { /*dipslay and rotate dotted borders when clicked*/
  opacity: 1;
  animation: spin 1s linear ;
  border-bottom: none;
  border-right: none;
  border-left: none;

}
@keyframes spin {
  0% {
    transform: scale(0.92) rotate(0deg);
  }
  100% {
    transform: scale(0) rotate(1500deg);
  }
}

main { /*overflow:hidden so that icons don't disturb the size of the window because of its expansion when clicked*/
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
＆＃13; 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>title</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
  <header>
  </header>
  <main>
    <ul>
      <li><a href="#"><i class="fa fa-gift" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-glass" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-globe" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-graduation-cap" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-heart" aria-hidden="true"></i></a></li>
    </ul>
  </main>
  <footer>
  </footer>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <!-- <script>
    $("li").click(function() {
      $(this).addClass("active");
    });
  </script> -->
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

您必须复制所有100 CSS，而不是悬停您创建一个新类。因此，如果您有这样的内容:hover，请将其设为li:hover a { }。然后单击添加新类，您在悬停时获得的CSS将保留在元素上。

＆＃13;
＆＃13; 
li:hover a,li.clicked a { }
＆＃13; 
$("li").click(function() {
  $(this).addClass("clicked");
});
＆＃13; 
@charset "utf-8";
body {
  margin: 0;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}

ul li {
  /*black border*/
  list-style: none;
  position: relative;
  width: 120px;
  height: 120px;
  background: #fff;
  margin: 0 20px;
  border: 2px solid #262626;
  box-sizing: border-box;
  border-radius: 50%;
  transition: .5s;
}

ul li .fa {
  /*arrengement of icons*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  font-size: 48px;
  color: #262626;
}

ul li:hover .fa,ul li.clicked .fa {
  /*make icons white when hovered*/
  color: #fff;
  transition: .5s;
}

ul li:before {
  /*pink circles invisible due to opacity:0*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e91e63;
  border-radius: 50%;
  transform: scale(1);
  opacity: 0;
}

ul li:hover:before,ul li.clicked:before {
  /*show pink circles when hovered*/
  opacity: 1;
  transform: scale(.8);
  transition: .5s;
}

ul li:after {
  /*dotted borders invisible due to opacity:0*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  /* border: 2px dashed #262626; */
  box-sizing: border-box;
  border-top: 2px dashed #262626;
  border-right: 2px dashed #262626;
  border-left: 2px dashed #262626;
  border-bottom: 2px dashed #262626;
}

ul li:hover:after,ul li.clicked:after {
  /*display and rotate dotted borderes when hovered*/
  opacity: 1;
  animation: rotateborder 10s linear infinite;
}

@keyframes rotateborder {
  0% {
    transform: scale(0.92) rotate(0deg);
  }
  100% {
    transform: scale(0.92) rotate(360deg);
  }
}

ul li:active:before,
ul li:active .fa {
  /*sublimate pink circles and icons when clicked*/
  transform: scale(20);
  opacity: 0;
  transition: 0.2s;
}

ul li:active:after {
  /*dipslay and rotate dotted borders when clicked*/
  opacity: 1;
  animation: spin 1s linear;
  border-bottom: none;
  border-right: none;
  border-left: none;
}

@keyframes spin {
  0% {
    transform: scale(0.92) rotate(0deg);
  }
  100% {
    transform: scale(0) rotate(1500deg);
  }
}

main {
  /*overflow:hidden so that icons don't disturb the size of the window because of its expansion when clicked*/
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：-1)

我不确定我是否解决了您的问题或者您要去哪里。

你不能将类添加到伪元素（因为，它不是真正的元素，因此是“伪”），但你可以使用带有CSS的类来设置伪元素的样式。

ul li.active::before, 
ul li.active::after{
     /* Your style */
}

所以我想，你的最终动画风格应该在CSS中用一个专门的类来“稳定”。 如果活动类用于其他东西，那么为伪元素使用专用类（.active-pseudo或任何看似正确的对象） 如果你绝对需要你的伪元素类，那么使用真实元素（span等）并忘记:: before和:: after。 ：）

相关问题
最新问题