html - div上の画像。下のホバーボタンが使えない

Question

私はこの問題に直面しています。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;
}

score 1 · Accepted Answer

表示するフィドル

CSS にタイプミスがありました:

.btn-test {
    position:relative;
}

ああ、あなたはすでにデフォルトの状態で行っているので、あなたdisplay: blockの状態を再度述べる必要はありません..btn-test:hover

score 0 · Accepted Answer

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

html - div上の画像。下のホバーボタンが使えない

2 に答える 2

Related

Reference