Question

我想在背景图片之前删除：

Php文件，

make_convolutional_layer

CSS，

    <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>

JS文件，

    .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;
}

之后我使用了这段代码，但它无效，

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);
});

图片是=＆gt; https://prnt.sc/idkci7

我想点击图片按钮然后播放视频然后播放按钮不显示但现在显示播放按钮。请任何人帮助如何删除播放按钮：之前使用jquery。 =＆GT; https://prnt.sc/idkeop

Answer 1

您无法直接使用Pseudo-elements删除jQuery，但可以在某个:before上设置class，然后使用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>

Answer 2

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

＆＃13;

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);
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

使用jquery从背景图像中删除::之前的CSS

2 个答案: