使用：在元素上的伪元素之后

Question

我的网站上有2张图片。

当我点击它们时，我想为它们添加叠加层。此叠加层是使用after伪类创建的。

但是，正如您在我的演示中所看到的那样，它并不起作用。我哪里错了？

演示： cordova-sqlite-storage

＆＃13;

＆＃13;

jQuery(".option").on('click',function() {
  jQuery(this).toggleClass('option optionActive');
});

＆＃13;

.option::after, .optionActive::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: #FFF;
}

.optionActive::after {
  display: block;
  background: rgba(0, 0, 0, .6);
}

.col-md-4 {
    margin-bottom: 30px;
    margin-left: 0;
    margin-right: 0;
}
@media (min-width: 768px) {
.col-md-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-md-4">
  <div class="option">
    <img src="http://placehold.it/200x200" class="debttype" data-type_id="1">
  </div>
</div>

<div class="col-md-4">
  <div class="option">
    <img src="http://placehold.it/200x200" class="debttype" data-type_id="1">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需在我们的代码中添加它即可。感谢

  .option::after, .optionActive::after {
     content: " ";
   }

Answer 2

试试这个。我已经改变了一些CSS，请检查一下。

＆＃13;

＆＃13;

Person

＆＃13;

jQuery(".option").on('click',function() {
  jQuery(this).toggleClass('option optionActive');
});

＆＃13;

.optionActive{
  position:relative;
  display: inline-block;
}
.optionActive:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  color: #FFF;
  background: rgba(0,0,0,0.6);
  content:"";
  position:absolute;
}

.col-md-4 {
    margin-bottom: 30px;
    margin-left: 0;
    margin-right: 0;
}
@media (min-width: 768px) {
  .col-md-4 {
      flex: 0 0 33.33333%;
      max-width: 33.33333%;
  }
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

您需要在css中添加Content:'';阅读更多abot pseudo元素。

jQuery(".option").on('click',function() {
  jQuery(this).toggleClass('option optionActive');
});

.option::after, .optionActive::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #FFF;
  content:'';
}

.optionActive::after {
  display: block;
  background: rgba(0, 0, 0, .6);
}

.col-md-4 {
    margin-bottom: 30px;
    margin-left: 0;
    margin-right: 0;
}
@media (min-width: 768px) {
.col-md-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-md-4">
  <div class="option">
    <img src="http://placehold.it/200x200" class="debttype" data-type_id="1">
  </div>
</div>

<div class="col-md-4">
  <div class="option">
    <img src="http://placehold.it/200x200" class="debttype" data-type_id="1">
  </div>
</div>

Answer 4

pseuso元素喜欢之后或之前没有内容属性的工作。您必须在css中指定内容。下方是代码段。您可以在here之后阅读更多内容。

＆＃13;

＆＃13;

jQuery(".option").on('click',function() {
  jQuery(this).toggleClass('option optionActive');
});

＆＃13;

.option::after, .optionActive::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content:"";
  color: #FFF;
}

.optionActive::after {
  display: block;
  background: rgba(0, 0, 0, .6);
}

.col-md-4 {
    margin-bottom: 30px;
    margin-left: 0;
    margin-right: 0;
}
@media (min-width: 768px) {
.col-md-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-md-4">
  <div class="option">
    <img src="http://placehold.it/200x200" class="debttype" data-type_id="1">
  </div>
</div>

<div class="col-md-4">
  <div class="option">
    <img src="http://placehold.it/200x200" class="debttype" data-type_id="1">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;