覆盖不包括div

Question

我有一个井内image。

当悬停图像时，覆盖信息显示（目前这是正确的）。

覆盖层应覆盖图像所在的整个井（灰色部分）。 product-title低于图像/井，与井分开。

因此，当悬停product-title不应该受到影响（它实际上应该得到一个红色background和文本字体color应该变白）。

从现在开始如何实现整个事情，包括product-title在悬停时变成灰色？

所以，现在一切都很好，只有当徘徊在product-title股利应该得到自己的风格，而不是灰色覆盖“隐藏”。

.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

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

你需要设置position:relative在父.product-detailsmas，否则position:absolute集，因为它是，会使元件出与DOM，没有父元素的流动。

并使其成为.product-detailsmas

注同级改变product-titlesidebar：由于您使用width/height:100% + padding，则需要box-sizing避免滚动

.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>