Divタグはホバーしながら下に降ります

Question

Divタグをホバーしている間に、別のDivタグが前のDivの前に表示されます。私は何の言葉も入れなかったとき、それは動作します。しかし、私はh3タグを置くと、divがダウンします。ここ

はHTMLここ

<div id="content"> 
    <h1 class="head-content">Biscuits</h1> 
    <div class="line"></div> 
    <a href="#"> 
     <div class="list-content"> 
      <div class="detail-content"> 
       <h3>Biscuits 1</h3> 
       <p>Price: IDR 12000</p> 
      </div> 
     </div> 
    </a> 
    <a href="#"> 
     <div class="list-content"> 
      <div class="detail-content"> 

      </div> 
     </div> 
    </a> 
    <a href="#"> 
     <div class="list-content"> 
      <div class="detail-content"> 

      </div> 
     </div> 
    </a> 
</div> 

はCSS

#content{ 
     width:50%; 
    } 
    .line{ 
     border-top: 5px solid black; 
    } 
    .list-content{ 
     display:inline-block; 
     width:25%; 
     height:200px; 
     background-color: black; 
     margin-top: 10px; 
    } 
    .detail-content{ 
     display: none; 
    } 
    .list-content:hover .detail-content{ 
     display: block; 
     width:100%; 
     height:75%; 
     background-color: rgba(255,255,255,0.6); 
    } 

が

Answer 1

CSSの一部下記のアップデート

.list-content:hover .detail-content { 
    display: table; 
    width: 100%; 
    height: 75%; 
    background-color: rgba(255, 255, 255, 0.6); 
} 

#content { 
 
    width: 50%; 
 
} 
 

 
.line { 
 
    border-top: 5px solid black; 
 
} 
 

 
.list-content { 
 
    display: inline-block; 
 
    width: 25%; 
 
    height: 200px; 
 
    background-color: black; 
 
    margin-top: 10px; 
 
} 
 

 
.detail-content { 
 
    display: none; 
 
} 
 

 
.list-content:hover .detail-content { 
 
    display: table; 
 
    width: 100%; 
 
    height: 75%; 
 
    background-color: rgba(255, 255, 255, 0.6); 
 
}

<div id="content"> 
 
    <h1 class="head-content">Biscuits</h1> 
 
    <div class="line"></div> 
 
    <a href="#"> 
 
    <div class="list-content"> 
 
     <div class="detail-content"> 
 
     <h3>Biscuits 1</h3> 
 
     <p>Price: IDR 12000</p> 
 
     </div> 
 
    </div> 
 
    </a> 
 
    <a href="#"> 
 
    <div class="list-content"> 
 
     <div class="detail-content"> 
 

 
     </div> 
 
    </div> 
 
    </a> 
 
    <a href="#"> 
 
    <div class="list-content"> 
 
     <div class="detail-content"> 
 

 
     </div> 
 
    </div> 
 
    </a> 
 
</div>

前に、あなたに感謝です

Answer 2

@James次のコードを見つけてください。私はあなたが同じことを期待していることを願っています。ちょうど "display：inline-block;"を置き換えました。 "float：left;"アンカータグ自体にクラス "list-content"を持っていました。

#content{ 
 
     width:50%; 
 
    } 
 
    .line{ 
 
     border-top: 5px solid black; 
 
    } 
 
    .list-content{ 
 
     float:left; 
 
     width:25%; 
 
     height:200px; 
 
     background-color: black; 
 
     margin-top: 10px; 
 
     margin-right:10px; 
 
    } 
 
    .detail-content{ 
 
     display: none; 
 
    } 
 
    .list-content:hover .detail-content{ 
 
     display: block; 
 
     width:100%; 
 
     height:75%; 
 
     background-color: rgba(255,255,255,0.6); 
 
    } 
 
    .clearfix{ 
 
    clear:both; 
 
    }

<div id="content"> 
 
    <h1 class="head-content">Biscuits</h1> 
 
    <div class="line"></div> 
 
    <div class="clearfix"> 
 
    <a href="#" class="list-content"> 
 
     <div class="detail-content"> 
 
       <h3>Biscuits 1</h3> 
 
       <p>Price: IDR 12000</p> 
 
      </div> 
 
    </a> 
 
    <a href="#" class="list-content"> 
 
     <div class="detail-content"> 
 

 
      </div> 
 
    </a> 
 
    <a href="#" class="list-content"> 
 
     
 
      <div class="detail-content"> 
 

 
      </div> 
 
     
 
    </a> 
 
    </div> 
 
</div>

Answer 3

あなたが縦にそれらを揃えるために持っているテキストコンテンツを追加したとき.list-contentアイテムは、インラインブロックされているので。 .list-contentにvertical-align: topを追加します。

.list-content { 
    display: inline-block; 
    width: 25%; 
    height: 200px; 
    background-color: black; 
    margin-top: 10px; 
    vertical-align: top; 
} 

から上の余白を削除：表：

h3 { 
    margin-top: 0; 
} 

{ 
 
    width: 50%; 
 
} 
 

 
.line { 
 
    border-top: 5px solid black; 
 
} 
 

 
.list-content { 
 
    display: inline-block; 
 
    width: 25%; 
 
    height: 200px; 
 
    background-color: black; 
 
    margin-top: 10px; 
 
    vertical-align: top; 
 
} 
 

 

 
.detail-content { 
 
    display: none; 
 
    width: 100%; 
 
    height: 75%; 
 
    background-color: rgba(255, 255, 255, 0.6); 
 
} 
 

 
.list-content:hover .detail-content { 
 
    display: block; 
 
} 
 

 
h3 { 
 
    margin-top: 0; 
 
}

<div id="content"> 
 
    <h1 class="head-content">Biscuits</h1> 
 
    <div class="line"></div> 
 
    <a href="#"> 
 
    <div class="list-content"> 
 
     <div class="detail-content"> 
 
     <h3>Biscuits 1</h3> 
 
     <p>Price: IDR 12000</p> 
 
     </div> 
 
    </div> 
 
    </a> 
 
    <a href="#"> 
 
    <div class="list-content"> 
 
     <div class="detail-content"> 
 

 
     </div> 
 
    </div> 
 
    </a> 
 
    <a href="#"> 
 
    <div class="list-content"> 
 
     <div class="detail-content"> 
 

 
     </div> 
 
    </div> 
 
    </a> 
 
</div>