jQuery顯示：無子div？

Question

我在一個div容器元素上有一個3D翻轉動畫。它適用於懸停功能。 此元素有兩個主要的子容器：正面和背面。

在正面和背面容器裏面有一個子容器，裏面有一張圖片。

<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容器都顯示無。

我想顯示阻止hover fonction上的後容器和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：懸停....

Answer 1

您的jQuery的鏈接是錯誤的$('.hover').$('.element-image-back 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'); 
      $('.element-image-back img').css('display', 'none'); 
      $('.back').css('display', 'none'); 
     }); 
    });