Question

我的图像悬停有问题。我正在创建代理页面，我有＆＃34;服务＆＃34;标签。有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

在z-index类

上添加images

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

Answer 2

您需要在z-index上使用.images，因为positions创建了图层，z-index定义了图层的顺序。

More info

z-index

Answer 3

将以下内容添加到您的css：

.row1, .row2 {
  overflow:hidden;
  clear:both;
}

当鼠标位于特定位置时，图像会悬停

3 个答案: