Question

我在div容器元素上有一个3D翻转动画。它适用于悬停功能。此元素有2个主要子容器：前和后。

在前后容器内有一个子div容器，里面有一张图片。

<div class="element hover blog" id="_13" >
<div class="front shadow">
<div class="element-image-front"><div class="overlay"></div>
<img src="./Post thumbnail images/formlabs.jpg"/>
</div></div>
<div class="back">
<div class="element-image-back">
<img src="./Post thumbnail images/formlabs.jpg">
</div>
</div>
</div>

在我的css中，后面的容器和后面的img容器都没有显示。

我想在悬停功能上显示阻止后面容器和img容器。并且当鼠标悬停时不显示任何内容。

我在使用$（this）正确编写代码时遇到问题。我的脚本工作正常，但我只想显示元素悬停的背面和img背面。因为我在同一页面上有很多元素

$(document).ready(function(){
    $('.hover').hover(function(){
        $(this).addClass('flip');
        $('.element-image-back img').css('display', 'block');
        $('.back').css('display', 'block');
    },function(){
        $(this).removeClass('flip');
        $('.hover').$('.element-image-back img').css('display', 'none');
        $('.hover').$('.back').css('display', 'none');
    });
});

我的css：

.element {
cursor: pointer;
width: 250px;
height: 180px;
margin: 3px;
float: left;
overflow: visible;
position: relative;
}
.element-image-front img{
position:absolute;
z-index: 3;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
outline: 1px solid rgba(0,0,0,0.1);
overflow:hidden;
}
.element-image-back img{
position: absolute;
display: none;
z-index: 4;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
opacity: 0.035;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.element .front {
position: absolute;
overflow: hidden;
z-index: 900;
width: 100%;
height: 100%;   
top: 0;
left: 0;
margin: 0;
padding: 0;
background: #333;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.element.flip .front {
position: absolute;
z-index: 900;
width: 100%;
height: 100%;
background: #333;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.element .back {
position: absolute;
display: none;
overflow: hidden;
z-index: 800;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
background: #434343;        
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.element.flip .back {
position: absolute;
z-index: 1000;
width: 100%;
height: 100%;
background: #434343; /***#191919***/
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-webkit-box-shadow: inset 0px 0px 12px rgba(0,0,0,0.4), 0px 0px 8px rgba(0,0,0,0.7);
-moz-box-shadow: inset 0px 0px 12px rgba(0,0,0,0.4), 0px 0px 8px rgba(0,0,0,0.7);
box-shadow: inset 0px 0px 12px rgba(0,0,0,0.4), 0px 0px 8px rgba(0,0,0,0.7);
}
.click .front {
cursor: pointer;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
}
.click.flip .front {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
}
.click .back {
cursor: pointer;
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
}
.click.flip .back {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
}

编辑：这里有一个css的小提琴：悬停：

http://fiddle.jshell.net/9B5mS/

使用css：hover ....

的动画仍然存在问题

Answer 1

$('.hover').$('.element-image-back img')中的jquery链接错误：尝试改变你的代码

$(document).ready(function () {
       $('.hover').hover(function () {
           $(this).addClass('flip');
           $('.element-image-back img').css('display', 'block');
           $('.back').css('display', 'block');
       }, function () {
           $(this).removeClass('flip');
           $('.element-image-back img').css('display', 'none');
           $('.back').css('display', 'none');
       });
   });

jQuery显示：无子div？

1 个答案: