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

Question

我正在研究 page将有多个工作示例，并且希望能够在您将鼠标悬停在图像上时在每个元素上显示隐藏的叠加层。我有两个样本。显示隐藏叠加层的初始悬停当前会在两者上显示叠加层。我想将显示限制为单个元素，然后能够在您将鼠标移开或单击叠加层时隐藏叠加层。

这是 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 -->