div コンテナー要素に 3D フリップ アニメーションがあります。ホバー機能で動作します。この要素には、 frontとbackの 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 :hover のフィドル:
http://fiddle.jshell.net/9B5mS/
css :hover ... を使用したアニメーションにはまだ問題があります。