在图像悬停时显示播放图标答案

【问题标题】：show play icon on image hover在图像悬停时显示播放图标
【发布时间】：2013-01-31 02:14:11
【问题描述】：

目标：当我将鼠标悬停在“项目”图像上时，我希望“播放”图像出现在“项目”图像 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 上时出现“播放”图像

如何通过将鼠标悬停在 itemImage.img 上来显示“播放”图像？？

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

出于某种原因我不想使用“a”标签，我也想知道我做错了什么？

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

【问题讨论】：

可以使用css的cursor属性

标签： html css

【解决方案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

【讨论】：

@Sowmya ...感谢您的快速响应。你能帮我解决这个问题吗？没有重大变化....jsfiddle.net/e6Lav/5 只是问

【解决方案2】：

CSS 很好，这个 HTML 可能更好

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

这将有助于播放按钮也成为一个链接:)

【讨论】：

Bette 使用播放图标作为背景并在该 div 之后关闭。