html - 覆盖区域不限于div

Question

我很难使 CSS 中的覆盖/悬停命令正常工作。我有 4 个并排的独立 div，当我在其上叠加使图片在悬停时淡出时，它会将悬停效果放在另一个 div 上，无论您是否悬停在该 div 上.我试图将悬停限制在 div 中的图像上，但不能 出现问题的页面是- http://www.peel-lawfirm.com/practice-areas/workplace-injury

这是我的 CSS 代码-

.fade {
   opacity: 0.5;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .fade:hover {
      opacity: 0.5;
    }
.overlay {
  position: absolute;
  top: 0;
  bottom: 10;
  left: 0;
  right: 10;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #ffffff;
}

.container:hover .overlay {
  opacity: 0.7;
  overflow: hidden;
}
.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;

这是我的那部分页面的 html-

<div class="container">
  <p>
    <h3 style="text-align:center;">Practice Areas</h3>
  <hr>
  </p>
    <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-12">
                <p><jdoc:include type="modules" name="box1" /></p>  
            </div>
             <div class="col-md-3 col-sm-6 col-xs-12">
                <p><jdoc:include type="modules" name="box2" /></p>
             </div>
     <div class="clearfix visible-sm"></div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <p><jdoc:include type="modules" name="box3" /></p>  
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <p><jdoc:include type="modules" name="box4" /></p>      
            </div>
    </div>
  </div>

Answer 1

你有 .container:hover .overlay {...} 这意味着当 .container div 悬停时它将适用于所有 .overlay div 在里面。您只需要为 .custom div 中所需的 .overlay div 应用 :hover。

将 .container:hover .overlay {...} 更改为 .custom:hover .overlay