css - 翻转人物时删除子img标签

我目前正在使用变换动画。
当我的鼠标光标移到图形标签上时，应将其翻转，并将其子img标签隐藏。

        <section id="FollowUs" class="container">
        <figure class="col-md-4 facebook">
            <img class="img-fluid facebook" src="http://www.orchidbox.com/userfiles/facebook_homepage(1).png">
            <figcaption>Facebook</figcaption>
        </figure>
        <figure class="col-md-4">
            <img class="img-fluid instagram" src="https://cloud.addictivetips.com/wp-content/uploads/2013/07/How-to-embed-Instagram-videos-and-photos-on-a-website-Step-1_.jpg">
            <figcaption>Instagram</figcaption>
        </figure>
        <figure class="col-md-4">
            <img class="img-fluid youtube" src="https://s.aolcdn.com/hss/storage/midas/7d58b1a08ffd698700a4388ee4f3f7fa/205220657/home-before.jpg">
            <figcaption>Youtube</figcaption>
        </figure>
        <figure class="col-md-4">
            <img class="img-fluid google" src="https://nickhughesblog.files.wordpress.com/2012/01/jan-2012.png">
            <figcaption>Google</figcaption>
        </figure>
    </section>

我的CSS：

section#FollowUs figure{
  display:inline-block;
  position:relative;
  padding:0;
  -webkit-transition:all 2s ease-in-out;
 }

 section#FollowUs img{
  border-radius:10px;
  -webkit-border-radius:10px;
  -o-border-radius:10px;
  -ms-border-radius:10px;
  -moz-border-radius:10px;
  backface-visibility:hidden;
 }
 figure.facebook:hover{
  -webkit-transform:rotateY(180deg);
 }
 figure.facebook{
  background-color:#3b5998;
 }
 figure.instagram{
   background-color:#cd486b;
 }
 figure.youtube{
  background-color:red;
 }
 figure.google{
   background-color:#000;
  }

使用我的代码，翻转是有效的，但是img不会被删除。

$('section#FollowUs figure').on('mouseover',function(){
    $(this).find('img').css('visibility','hidden');
});

尝试过此javascript代码。它删除了图像，但是我看不到图形标签的背景色。

最佳答案

找到解决方案。
我犯了几个错误。
首先，无需为figcaption使用背景色。

其次，我做了重复的选择器。有两个Figure.google选择器。

第三，我没有设置人物标签的类别

最后，翻转后没有显示背景，因为Figure.facebook DOM元素没有任何背景样式。

现在工作正常
这是CSS代码，可以正常工作

section#FollowUs figure{
display:inline-block;
position:relative;
padding:0;
-webkit-transition:all 0.5s ease-in-out;

}

section#FollowUs img{
border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
-ms-border-radius:10px;
-moz-border-radius:10px;
backface-visibility:hidden;
}
figure.facebook:hover, figure.google:hover, figure.instagram:hover,
figure.youtube:hover{
-webkit-transform:rotateY(180deg);
}
figure.facebook{
background-color:#3b5998;
}
figure.instagram{
background-color:#cd486b;
}
figure.youtube{
background-color:red;
}
figure.google{
background-color:#000;
}

javascript

$('section#FollowUs figure').on('mouseover',function(){
    $(this).find('img').css('visibility','hidden');
});

关于css - 翻转人物时删除子img标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47243365/