覆盖区域不限于 div

Question

我很难使 CSS 中的 overlay/hover 命令正常工作。我有 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

覆盖区域不限于 div

overlay area not restricted to div

html

css

joomla

twitter-bootstrap