Question

我目前正在使用变换动画。当我的鼠标光标在图形标记上方时，它应该被翻转并且子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代码。它会删除图像，但我看不到图形标记的背景颜色。

Answer 1

找到解决方案。我犯了几个错误。首先，没有必要使用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');
});

翻转图形时删除子img标记

1 个答案: