首页 文章

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

提问于
浏览 次
-1

我遇到了这个问题 . 我有一个图像，需要在div上的这个位置 . 图像的叶子需要越过div，但图像宽度太远并阻挡其他东西 . 就我而言，它会阻止"contact us"按钮悬停 . 如何在不从此设置位置移动图像的情况下解决此问题 . 我尝试过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

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

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

2 回答

  • 0

    您在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;
}
    回复于
  • 1

    Fiddle to show

    你的CSS有一个错字：

    .btn-test {
    position:relative;
}

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

    回复于

相关问题