在图像悬停上显示播放图标

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>

这将有助于播放按钮是一个链接太:)