Html 在图像悬停上显示播放图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14889028/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
show play icon on image hover
提问by gaurav jain
Goal: When I hover on "item" image, I want a "play" image to appear in center of "item" image div. I did following:
目标：当我将鼠标悬停在“项目”图像上时，我希望“播放”图像出现在“项目”图像div 的中心。我做了以下：
play.img overlaps itemImage.img
play.img 与 itemImage.img 重叠
HTML:
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
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;
}
With code above, the "play" image appears only when I hover on div.play instead I want the "play" image to appear when I hover on .itemContainer.img
使用上面的代码，“播放”图像仅在我将鼠标悬停在 div.play 上时才会出现，而我希望在将鼠标悬停在 .itemContainer.img 上时出现“播放”图像
How can I make "play" image appear by hovering on itemImage.img??
如何通过将鼠标悬停在 itemImage.img 上来显示“播放”图像？
Reference: http://www.itsalif.info/content/show-play-icon-mouse-over-thumbnail-using-css
参考：http: //www.itsalif.info/content/show-play-icon-mouse-over-thumbnail-using-css
for some reason I do not want to use "a" tag and I also wanted to know what I am doing wrong?
出于某种原因，我不想使用“a”标签，我也想知道我做错了什么？
http://jsfiddle.net/e6Lav/5/ -- Problem
http://jsfiddle.net/2uJKR/11/ -- Solution
回答by Sowmya
Try this
尝试这个
HTML
HTML
<div class="itemsContainer">
<div class="image"> <a href="#"> <img src="#" /> </a></div>
<div class="play"><img src="#" /> </div>
</div>
CSS
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
}
回答by user3443284
The CSS is fine bot this HTML might be better
CSS 很好，这个 HTML 可能更好
<div class="itemsContainer">
<a href=""><img src=""/></a>
<div class="play">
<a href=""><img src="" /></a>
</div>
</div>
<div class="itemsContainer">
<a href=""><img src=""/></a>
<div class="play">
<a href=""><img src="" /></a>
</div>
</div>
This will help the play button to be a link too :)
这也将有助于播放按钮成为链接:)
