在圖像懸停上顯示播放圖標

Question

目標：當我懸停在「項目」圖像上時，我想讓「播放」圖像出現在「項目」圖像div的中心。我當時以下：

play.img重疊itemImage.img

HTML：

<div class="itemsContainer"> 
    <img src="/images/G1.jpg"/> 
    <div class="playy"> 
    <img src="/images/playy.png"/> 
    </div> 
</div> 
<div class="itemsContainer"> 
    <img src="/images/B1.jpg"/> 
    <div class="playy"> 
    <img src="/images/playy.png"/> 
    </div> 
</div> 
<div class="clear"> 

CSS

.itemsContainer { 
    float: left; 
    width : 300px; 
    height : 300px; 
    margin-left : 2px; 
} 

.itemsContainer img { 
    width : 300px; 
    height : 175px; 
    margin-bottom : -115px; 
    z-index : -1; 
} 
.play img { 
    position : relative; 
    width : 50px; 
    height : 50px; 
    z-index : 100; 
    margin : 0 0 50px 125px; 
    opacity : 0.0 ; 
} 

.itemsContainer img:hover { 
    opacity : 0.8; 
} 

有了上面的代碼， 「玩」 的形象出現，只有當我將鼠標懸停而不是div.play，我希望當我懸停在.itemContainer.img上時出現「play」圖像。

如何通過懸停在itemImage.img上使「播放」圖像出現？

參考：http://www.itsalif.info/content/show-play-icon-mouse-over-thumbnail-using-css

由於某種原因，我不想用「一」的標籤，我也想知道我做錯了嗎？

http://jsfiddle.net/e6Lav/5/ -- Problem 
http://jsfiddle.net/2uJKR/11/ -- Solution 

Answer 1

試試這個

HTML

<div class="itemsContainer"> 
    <div class="image"> <a href="#"> <img src="#" /> </a></div> 
    <div class="play"><img src="#" /> </div> 
</div> 

CSS

.itemsContainer { 
    background:red; 
    float:left; 
    position:relative 
} 
.itemsContainer:hover .play{display:block} 
.play{ 
    position : absolute; 
    display:none; 
    top:20%; 
    width:40px; 
    margin:0 auto; left:0px; 
    right:0px; 
    z-index:100 
} 

DEMO

Answer 2

的CSS是罰款BOT這種HTML可能會更好

<div class="itemsContainer"> <a href=""><img src=""/></a> <div class="play"> <a href=""><img src="" /></a> </div> </div>

這將有助於播放按鈕是一個鏈接太:)