如何使用jQuery切换隐藏的叠加层

Question

我正在一个页面上工作，该页面将有多个工作示例，并希望当您将鼠标悬停在图像上时能够在每个元素上显示隐藏的叠加层。 我有两个样本。 用于显示隐藏叠加层的初始悬停当前在两者上都显示叠加层。 我想将显示限制为单个元素，然后当您将鼠标移出或单击覆盖时可以隐藏覆盖。

这是HTML：

          <div class="project col-sm-6">
           <a class="project_link" href="/our-work/project/{url_title}">
              <img src="/images/tmp-website-1.jpg" alt="replace" class="img-fluid" />
            </a>
            <div class="overlay" style="display: none;">
                <div class="text">
                <h3>Project Title</h3>
                <p>Project Summary</p>
                <p class="view"><a href="/our-work/project/">VIEW</a></p>
                </div>
            </div><!-- overlay -->
        </div><!-- project -->

CSS：

.project { 
    position: relative;
    width: 95%;
    height: auto;
    padding: 0;
    overflow: hidden;
    }

.overlay { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    opacity: .9;
 }

.text { width: 75%; height: 30%; margin: 50px auto; text-align: center; } 

jQuery：

$( '.project_link' ).hover(function() {
  $( '.overlay' ).show( );
});
$('.overlay').click(function() {
  $( '.overlay' ).hide( );
})

Answer 1

为此，使用jQuery没有多大意义。 只需使用纯CSS。

.project:hover .overlay{
  display:block;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: .9;
  display:none;
}

演示

 .project { position: relative; width: 95%; height: auto; padding: 0; overflow: hidden; } .project:hover .overlay{ display:block; } .overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #fff; opacity: .9; display:none; } .text { width: 75%; height: 30%; margin: 50px auto; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="project col-sm-6"> <a class="project_link" href="/our-work/project/{url_title}"> <img src="/images/tmp-website-1.jpg" alt="replace" class="img-fluid" /> </a> <div class="overlay"> <div class="text"> <h3>Project Title</h3> <p>Project Summary</p> <p class="view"><a href="/our-work/project/">VIEW</a></p> </div> </div> <!-- overlay --> </div> <!-- project --> 

Answer 2

为什么不拿走JavaScript并使用opacity设置。 我所要做的就是将.overlay设置为opacity:0; 并设置一个过渡，以便叠加层可以很好地插入并在.project悬停时添加， overlay具有opacity:1;

 .project { position: relative; width: 95%; height: auto; padding: 0; overflow: hidden; } .overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #fff; opacity: 0; transition: all 0.2s ease-in; } .project:hover .overlay { opacity:0.9; } .text { width: 75%; height: 30%; margin: 50px auto; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="project col-sm-6"> <a class="project_link" href="/our-work/project/{url_title}"> <img src="http://rouviere.com/images/tmp-website-1.jpg" alt="replace" class="img-fluid" /> </a> <div class="overlay"> <div class="text"> <h3>Project Title</h3> <p>Project Summary</p> <p class="view"><a href="/our-work/project/">VIEW</a></p> </div> </div><!-- overlay --> </div><!-- project --> 

希望这可以帮助。