时间戳

首页 > 解决方案 > 我如何在 CSS onClick 事件中使用 :after

javascript - 我如何在 CSS onClick 事件中使用 :after

问题描述

function mutevideo(evt) {
  if (evt.target.classList.contains('fa-video-camera')) {
    evt.target.classList.remove('fa-video-camera')
    evt.target.classList.add('fa-video-camera:after') // need here above fontawesom class with slash
  } else {
    evt.target.classList.remove('fa-video-camera:after') // need here above fontawesom class with slash
    evt.target.classList.add('fa-video-camera')
  }
}
.fa-video-camera:after {
  position: absolute;
  content: "/";
  color: white;
  font-weight: 900;
  font-size: 20px;
  left: 10px;
  top: 7px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<p class="bg-white text-danger rounded-circle"><i onClick=mutevideo(evt) class="fa fa-video-camera p-2 fa-1x"></i></p>

问题：-

在 fontawesome 4.7 版本中，它没有 5.x 版本中的斜线视频，所以在这里我编写了自己的 css:after来实现这一目标，现在我将如何在页面加载后立即获得视频斜线，但是我的要求是我点击后需要在图标上加上斜线。

注意：-

这里我使用的是fontawesome 4.7版，任何帮助或建议都非常感谢

标签： javascripthtmlcss

解决方案

您可以简单地使用自定义类.stop在单击时在您的字体真棒图标中添加斜线。无需添加另一个图标即可添加斜线。

要在点击时显示和隐藏，我们可以简单地使用toggle()函数而不是做很多if'sand elseor addor or removeclasses

运行下面的代码段。

function mutevideo(evt) {
  if (evt.classList.contains('fa-video-camera')) {
    evt.classList.toggle('stop')
  }
}
.stop:after {
  position: absolute;
  content: "/";
  color: white;
  font-weight: bold;
  font-size: 23px;
  left: 11px;
  top: 12px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<p class="bg-white rounded-circle"><i onClick=mutevideo(this) class="fa fa-video-camera p-2 fa-1x"></i></p>

推荐阅读