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。您只需要为:hover div内的所需.overlay div应用.custom。

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

重叠区域不限于div

1 个答案: