Question

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

enter image description here

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;
}

Answer 1

Fiddle to show

你的CSS上有一个拼写错误：

.btn-test {
    position:relative;
}

哦，你不需要在display: block上重新陈述.btn-test:hover，因为你已经做了默认状态。

Answer 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;
}

div上的图像。不能悬停在下面的按钮

2 个答案: