div 上的图像。下方无法悬停按钮答案

【问题标题】：image over div. Cant hover button belowdiv 上的图像。下方无法悬停按钮
【发布时间】：2023-04-08 15:38:01
【问题描述】：

我遇到了这个问题。我有一个图像需要在 div 上的这个位置。图像的叶子需要越过 div，但图像宽度过大并挡住了其他东西。就我而言，它阻止了悬停的“联系我们”按钮。如何在不从该设置位置移动图像的情况下解决此问题。我试过 z-index 但这不起作用。我想保持原样，但可以悬停。请帮忙。我将附上一张图片和一个 FIDDLE： http://jsfiddle.net/4jtzU/

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut l

联系我们

<div id="boxes">
    <div class="box">
        <div class="box-container">
            <div class="box-img">
                <img src="http://www.nevsites.com/dish1.png" />
            </div>
        </div>
    </div>
</div>

CSS：

.btn_test{
    border: none;
    padding: 0;
    background: none;
    display:block;
    background-color: #FF8000;
    padding: 10px;
    font-family: helevetica, Arial, sans-serif;
    width: 70%;
    margin:10px auto;
    color:white;
   font-weight: bold;
    z-index:10;
   postion:relative;
}
.btn_test:hover{
   background-color: gray;
   cursor: pointer;
   display:block;
}
#mid-boxes-container{
   background: red;
   height:100px;
   width:100%;  
}
#mid-boxes{    
   width:80%;
   height: 100%;
   margin: 0 auto;
}
.mid-box{
   padding: 10px;
   text-align: center;
   float:left;
   width:28%;
   height:150px;
   margin:0 .5%;
    color:white;
   background: red;
}
#boxes{
   margin:0 auto;
   margin-top: 50px;
   position: relative;
}
.box{
   width:100%;
   height: 600px;
   text-align: center;
   -webkit-animation: FadeIn 1s linear; 
   -webkit-animation-fill-mode:both;
   position: relative;
}

.box-container{
   margin: 10px;
   height: 100% ;
   position: relative;
}
.box-img{
   width:60%;
   position: relative;
   float:left;
}
.box-img img{
    width:1000px;
    position: relative;
   margin-top: -120px;
   margin-left: -340px;
}

【问题讨论】：

标签： html css image hover

【解决方案1】：

Fiddle to show

您的 CSS 有错字：

.btn-test {
    position:relative;
}

哦，您无需在 .btn-test:hover 上重新声明您的 display: block，因为您已经在其默认状态下重新声明了。

【讨论】：

【解决方案2】：

您在 CSS 的第 14 行有错字，将 postion:relative; 更改为 position:relative; 将更正问题。

所以它最终会是这样的：

http://jsfiddle.net/4jtzU/3/

.btn_test{
    border: none;
    padding: 0;
    background: none;
    display:block;
    background-color: #FF8000;
    padding: 10px;
    font-family: helevetica, Arial, sans-serif;
    width: 70%;
    margin:10px auto;
    color:white;
    font-weight: bold;
    z-index:10;
    position:relative;
}

【讨论】：