Question

我只需要将鼠标悬停在图像上时添加图像以覆盖播放按钮，我有点工作，但是我无法将其覆盖在图像上，它只显示在图像后面。我已经尝试将Z指数设置得更高但它仍然不会工作。

这是我的HTML标记

<div class="articles"><img alt="image1" src="Resources/092812newshubgmtseg1b_167x94.jpg">
            <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Beatus sibi videtur. 3:40</figcaption>
        </div>

这是我的CSS

.articles img {
    width: 143px;
    height: 85px;
    z-index: 1;
}



.articles img:hover {
    border-bottom: 5px #2ecc71 solid;
    border-top: 5px #2ecc71 solid;
    z-index: 1;
}

.articles:hover{
    color:#2ecc71;
    background: url(Resources/play.png);
    z-index:10;
}

Answer 1

首先：父元素永远不会在＃34;顶部＆＃34;他们的孩子元素。因此，将var iframe = $('<iframe src="'+url+'" style="display:none"></iframe>').appendTo($('#main')).load(function(){ iframe.get(0).contentWindow.print(); });设置为比其子.article更高的z-index将无法正常工作。

您可以使用.article img伪选择器向:after上的.article元素动态添加一些额外内容。这是一个例子：

＆＃13;

:hover

＆＃13;

.articles img {
  width: 143px;
  height: 85px;
}

.articles img:hover {
  border-bottom: 5px #2ecc71 solid;
  border-top: 5px #2ecc71 solid;
}

.articles:hover:after{
  content: " ";
  display: block;
  position: absolute;
  left: 70px;
  top: 40px;
  width: 40px;
  height: 20px;
  color: #2ecc71;
  background: url("http://dummyimage.com/40x20/666666/fff&text=PLAY");
}

＆＃13;

Answer 2

请查看此解决方案jsfiddle，希望它能为您提供帮助

.articles img {width:143px;height:85px;z-index:1;}
.articles img:hover {border-bottom: 5px #2ecc71 solid;border-top: 5px #2ecc71 solid;z-index: 1;}
.top {Position:absolute;z-index:999;top:5px;opacity:0;}
.top:hover{opacity:1;}
.behind {position:relative;z-index:10;}

<div class="articles"><div class="behind"><img  alt="image1" src="http://media.marketwatch.com/video/20120928/092812newshubgmtseg1b/092812newshubgmtseg1b_1280x720.jpg"></div><div class="top"><img style="z-index:1;position:absolute;" alt="image1" src="http://wyeoakmusic.com/site/wp-content/plugins/haiku-minimalist-audio-player/resources/play.png"></div>
            <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Beatus sibi videtur. 3:40</figcaption>
        </div>

覆盖css播放按钮

2 个答案: