オーバーレイは含まれていません

Question

私はウェル内にimageを持っています。

画像/井戸をホバリングすると、オーバーレイ情報が表示されます（現在はこれが正しい）。

オーバーレイは、画像が配置されているウェル全体（灰色部分）を覆う必要があります。 product-titleはイメージ/ウェルの下にあり、ウェルとは別です。

product-titleにホバーすると、実際には赤色のbackgroundとなり、テキストフォントcolorが白くなるはずです。

これ以降、達成する方法は、ホバリング時にproduct-titleを含むすべてのものがグレーになりますか？

product-title divにカーソルを合わせると、灰色のオーバーレイで「隠されていない」独自のスタイルが得られるはずです。

.product-detailsmas .overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0; 
 
    border-radius: 0; 
 
    background: #F7F7F7; 
 
    color: blue; 
 
    text-align: center; 
 
    padding: 10px; 
 
    border-top: 1px solid #A10000; 
 
    /* vertical-align: middle; */ 
 
    -webkit-transition: opacity 500ms; 
 
    -moz-transition: opacity 500ms; 
 
    -o-transition: opacity 500ms; 
 
    transition: opacity 500ms; 
 
} 
 

 
.product-detailsmas { 
 
    background-color: #E6E6E6; 
 
    text-align: center; 
 
} 
 

 
.product-detailsmas:hover .overlay { 
 
    opacity: 1; 
 
} 
 

 
.well.sb .product-titlesidebar { 
 
    font-size: 13px; 
 
    font-family: 'Montserrat',sans-serif; 
 
    color: #444; 
 
    font-weight: 700; 
 
    line-height: 1.25em; 
 
    margin: 5px; 
 
}

<div> 
 
     <a href="#" target="_blank"> 
 
     <div class="product-detailsmas"> 
 
      <div class="image-video-linksidebar"> 
 
       <img alt="#" src="http://lorempixel.com/100/100"> 
 
       <div class="brandmas"> 
 
        BRAND 
 
       </div> 
 
       <div class="categorymas"> 
 
        CATEGORY 
 
       </div> 
 
      </div> 
 
      <div class="overlay"> 
 
       <div class="intro-descriptioncar"> 
 
        Intro description car 
 
       </div> 
 
       <div class="userfield1car"> 
 
        Userfield-1-car 
 
       </div> 
 
       <div class="userfield1car"> 
 
        Userfield-2-car 
 
       </div> 
 
       <div class="userfield1car"> 
 
        Userfield-3-car 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="product-titlesidebar"> 
 
      CAR TITLE BRAND CATEGORY MODEL-THIS SHOULD NOT BE AFFECTED BY THE OVERLAY HOVER 
 
     </div><!--</div>--></a> 
 
    </div>

Answer 1

を避けるためにbox-sizingが必要になりますADD：position: relative;〜.product-detailsmas CSS。

絶対配置要素を親に限定します。

REMOVE：パディングオン.product-detailsmas .overlay - オーバーレイが親よりも大きくなっています。

.product-detailsmas .overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0; 
 
    border-radius: 0; 
 
    background: #F7F7F7; 
 
    color: blue; 
 
    text-align: center; 
 
    border-top: 1px solid #A10000; 
 
    /* vertical-align: middle; */ 
 
    -webkit-transition: opacity 500ms; 
 
    -moz-transition: opacity 500ms; 
 
    -o-transition: opacity 500ms; 
 
    transition: opacity 500ms; 
 
} 
 

 
.product-detailsmas { 
 
    background-color: #E6E6E6; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.product-detailsmas:hover .overlay { 
 
    opacity: 1; 
 
} 
 

 
.well.sb .product-titlesidebar { 
 
    font-size: 13px; 
 
    font-family: 'Montserrat',sans-serif; 
 
    color: #444; 
 
    font-weight: 700; 
 
    line-height: 1.25em; 
 
    margin: 5px; 
 
}

<div> 
 
     <a href="#" target="_blank"> 
 
     <div class="product-detailsmas"> 
 
      <div class="image-video-linksidebar"> 
 
       <img alt="#" src="http://lorempixel.com/100/100"> 
 
       <div class="brandmas"> 
 
        BRAND 
 
       </div> 
 
       <div class="categorymas"> 
 
        CATEGORY 
 
       </div> 
 
      </div> 
 
      <div class="overlay"> 
 
       <div class="intro-descriptioncar"> 
 
        Intro description car 
 
       </div> 
 
       <div class="userfield1car"> 
 
        Userfield-1-car 
 
       </div> 
 
       <div class="userfield1car"> 
 
        Userfield-2-car 
 
       </div> 
 
       <div class="userfield1car"> 
 
        Userfield-3-car 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="product-titlesidebar"> 
 
      CAR TITLE BRAND CATEGORY MODEL-THIS SHOULD NOT BE AFFECTED BY THE OVERLAY HOVER 
 
     </div><!--</div>--></a> 
 
    </div>

私はそれが技術的には大丈夫だけど、私は個人的にアンカータグ内の別々のdivの束をロードしませでしょう。

Answer 2

あなたはDOMとの流れではなく、親要素のうち、要素になるだろう、それがあるとしてそれ以外position:absoluteを設定し、自分の親.product-detailsmasにposition:relativeを設定する必要があります。

、それ.product-detailsmas

ノートの兄弟作ることによってproduct-titlesidebarを変更：あなたは+ paddingwidth/height:100%を使用しているので、あなたはスクロールバー

.product-detailsmas { 
 
    position: relative 
 
} 
 
.product-detailsmas .overlay { 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0; 
 
    border-radius: 0; 
 
    background: #F7F7F7; 
 
    color: blue; 
 
    text-align: center; 
 
    padding: 10px; 
 
    border-top: 1px solid #A10000; 
 
    /* vertical-align: middle; */ 
 
    -webkit-transition: opacity 500ms; 
 
    -moz-transition: opacity 500ms; 
 
    -o-transition: opacity 500ms; 
 
    transition: opacity 500ms; 
 
} 
 
.product-detailsmas { 
 
    background-color: #E6E6E6; 
 
    text-align: center; 
 
} 
 
.product-detailsmas:hover .overlay { 
 
    opacity: 1; 
 
} 
 
.well.sb .product-titlesidebar { 
 
    font-size: 13px; 
 
    font-family: 'Montserrat', sans-serif; 
 
    color: #444; 
 
    font-weight: 700; 
 
    line-height: 1.25em; 
 
    margin: 5px; 
 
}

<div> 
 
    <a href="#" target="_blank"> 
 
    <div class="product-detailsmas"> 
 
     <div class="image-video-linksidebar"> 
 
     <img alt="#" src="http://lorempixel.com/100/100"> 
 
     <div class="brandmas"> 
 
      BRAND 
 
     </div> 
 
     <div class="categorymas"> 
 
      CATEGORY 
 
     </div> 
 
     </div> 
 
     <div class="overlay"> 
 
     <div class="intro-descriptioncar"> 
 
      Intro description car 
 
     </div> 
 
     <div class="userfield1car"> 
 
      Userfield-1-car 
 
     </div> 
 
     <div class="userfield1car"> 
 
      Userfield-2-car 
 
     </div> 
 
     <div class="userfield1car"> 
 
      Userfield-3-car 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div> 
 
<div class="product-titlesidebar"> 
 
    CAR TITLE BRAND CATEGORY MODEL-THIS SHOULD NOT BE AFFECTED BY THE OVERLAY HOVER 
 
</div>