html - 鼠标在特定位置时图像悬停

Question

我对图像悬停有疑问。我正在创建代理页面，并且有“服务”选项卡。有 6 个图像、文本和按钮。

我在将鼠标悬停在图像上时对覆盖进行了编码，但它无法正常工作。当我将鼠标放在图像的一小部分上时它会起作用(例如，当我将鼠标放在图像中间时它不起作用)。

我注意到我的文本 div 有问题。当我删除它时，一切正常。此外，当我更改此 div 的高度时效果很好，但我的按钮改变了它的位置。

如果您知道我该如何解决它，我将不胜感激。

这是我的 HTML 和 Codepen:

    <div id="services">
     <div class="images">
        <div class="row1">
            <div class="img1">
            <img src="http://images82.fotosik.pl/266/994510792e940bac.jpg"/>
            <div class="imgHover"><p>Professional Analysys</p></div>
            </div>
                        <div class="img2">
                            <img src="http://images81.fotosik.pl/266/ba83ea8331da15ef.jpg" />
                            <div class="imgHover"><p>UX/UI Design</p></div>
                        </div>
                        <div class="img3">
                            <img src="http://images82.fotosik.pl/266/994510792e940bac.jpg" />
                            <div class="imgHover"><p>Strategy planning</p></div>
                        </div>
                    </div>

                    <div class="row2">
                        <div class="img4">
                            <img src="http://images81.fotosik.pl/266/ba83ea8331da15ef.jpg" />
                            <div class="imgHover"><p>SEO & SEM</p></div>
                        </div>
                        <div class="img5">
                            <img src="http://images82.fotosik.pl/266/994510792e940bac.jpg" />
                            <div class="imgHover"><p>Web Development</p></div>
                        </div>
                        <div class="img6">
                            <img src="http://images81.fotosik.pl/266/ba83ea8331da15ef.jpg" />
                            <div class="imgHover"><p>Social Media</p></div>
                        </div>
                    </div>
                </div>
  <div class="services-text">
                    <p>We specialize in delivering the best solutions for your business. Our professional team works every day to satisfy you and improve your incomes.</p>
                    <button href="#">Request a call</button>
                </div>
            </div>

http://codepen.io/anon/pen/BpaLRa

Answer 1

在 images 类上添加 z-index

.images {
    text-align: center;
    max-width: 750px;
    max-height: 1400px;
    margin: 0 auto;
    position: relative;
    bottom: 100px;
    z-index: 9;
}