删除::在带有jQuery的CSS之前

Question

我想删除：在背景图像之前。

php文件，

    <li class="vi">
    <a href="javascript:;">
<span class="play-btn"></span><img src="/v1.jpg" data-video="https://www.youtube.com/embed/Nxj8BWiyypQ?rel=0&amp;showinfo=0&amp;autoplay=1" class="videoGPoster"> 
    </a>
    <h5>Videos 2</h5>
    </li>

CSS，

    .home_gallery .gallery_wheel .recent_photpvideo ul li.vi:before {
        position: absolute;
        top: 30%;
        width: 120px;
        height: 120px;
        content: "";
        background: url(images/play.png);
        background-size: cover;
        left: 30%;
        transform: translate(0%,0%);
.play-btn {
    position: absolute;
    top: 30%;
    width: 120px;
    height: 120px;
    content: "";
    background: url(images/play.png);
    background-size: cover;
    left: 30%;
    transform: translate(0%,0%);
    z-index: 1;
}

JS文件，

jQuery('img.videoGPoster').click(function () {
    video = '<iframe width="400" height="300" src="' + jQuery(this).attr('data-video') + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
    jQuery(this).replaceWith(video);
});

我之后使用此代码，但不起作用，

jQuery('.play-btn').click(function () {
    alert();
    video = '<iframe width="400" height="300" src="' + jQuery(this).attr('data-video') + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
    jQuery(this).replaceWith(video);
});

图像是=> https://prnt.sc/idkci7

我想单击图像按钮，然后播放视频，然后播放按钮不显示，但现在显示播放按钮。请任何人帮助如何删除播放按钮：与jQuery之前。=> https://prnt.sc/idkeop

Answer 1

您无法使用jQuery选择伪选择器，因此您不能直接修改其行为。但是，使用jQuery，您可以在这种情况下添加类或删除dom元素的 li。然后您可以使用CSS属性。

jQuery('img.videoGPoster').click(function () {
    video = '<iframe width="400" height="300" src="' + jQuery(this).attr('data-video') + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
    
    jQuery(this).parents("li.vi").addClass("playing");
    jQuery(this).replaceWith(video);
});

li.vi {
 position: relative;
}
li.vi:before {
    position: absolute;
    top: 30%;
    width: 120px;
    height: 120px;
    content: "";
    background: url(http://img.jetbitts.com/android/thumbs/ico/0/google-play-android.jpg);
    background-size: cover;
    left: 30%;
    transform: translate(0%,0%);
}
li.vi.playing:before {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="vi">
   <a href="javascript:;"><img src="https://cdn.pixabay.com/photo/2017/10/13/04/13/scenery-2846777_960_720.jpg" data-video="https://www.youtube.com/embed/Nxj8BWiyypQ?rel=0&amp;showinfo=0&amp;autoplay=1" class="videoGPoster"> 
   </a>
   <h5>Videos 2</h5>
</li>
<li class="vi">
   <a href="javascript:;"><img src="https://cdn.pixabay.com/photo/2017/10/13/04/13/scenery-2846777_960_720.jpg" data-video="https://www.youtube.com/embed/Nxj8BWiyypQ?rel=0&amp;showinfo=0&amp;autoplay=1" class="videoGPoster"> 
   </a>
   <h5>Videos 2</h5>
</li>

Answer 2

您不能直接使用jQuery删除Pseudo-elements，但是您可以在某个class上设置:before，然后使用jQuery

删除此类

jQuery('img.videoGPoster').click(function() {
  video = '<iframe width="400" height="300" src="' + jQuery(this).attr('data-video') + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
  jQuery(this).replaceWith(video);
  jQuery('.vi').removeClass('bg');
});

li.bg:before {
  position: absolute;
  top: 30%;
  width: 120px;
  height: 120px;
  content: "";
  background: url(images/play.png);
  background-size: cover;
  left: 30%;
  transform: translate(0%, 0%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="vi bg">
  <a href="javascript:;"><img src="/v1.jpg" data-video="https://www.youtube.com/embed/Nxj8BWiyypQ?rel=0&amp;showinfo=0&amp;autoplay=1" class="videoGPoster">
  </a>
  <h5>Videos 2</h5>
</li>