问题描述
目标:当我将鼠标悬停在项目图像上时,我希望播放图像出现在项目图像div的中心。我做了以下事情:
Goal: When I hover on "item" image, I want a "play" image to appear in center of "item" image div. I did following:
play.img与itemImage.img重叠
play.img overlaps 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上时显示播放图像
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
如何通过悬停在itemImage.img上来使播放图像出现
How can I make "play" image appear by hovering on itemImage.img??
参考:
出于某种原因,我不想使用 a标签,我也想知道我在做什么错?
for some reason I do not want to use "a" tag and I also wanted to know what I am doing wrong?
http://jsfiddle.net/e6Lav/5/ -- Problem
http://jsfiddle.net/2uJKR/11/ -- Solution
推荐答案
尝试一下
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
这篇关于在图像悬停时显示播放图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!