结合活动背景 onclick 和 mouseover jquery

Question

有点难以解释，但下面的屏幕截图显示了我想要的结果。

这就是我想要的结果。单击图像时会激活半透明的蓝色背景。对于其他图片，隐藏标题并在悬停时显示半透明蓝色背景。

但是我得到的是这样的。我知道这是由 class "title"、100% height 和 jQuery 代码引起的。我不知道如何组合 mouseleave 和 click。希望你们中的一些人能给我一些建议。谢谢！

$(document).ready(function() {
  //hover effect
 $('.thumbnail').mouseenter(function(e) {
  $(this).children('span').children('span').removeClass('title');
  $(this).children('span').children('span').addClass('dark-background').fadeOut(0).fadeIn(500);
 }).mouseleave(function(e) {
  $(this).children('span').children('span').removeClass('dark-background').fadeOut(0).fadeIn(200);
  $(this).children('span').children('span').addClass('title');  
 });

  //active after clicked
 $(".thumbnail").click(function(){ 
  $(this).data('clicked', true);
  if($(this).data('clicked')) {
   $(this).children('span').children('span').addClass('title'); 
   $(this).children('span').children('span').toggleClass('background-active');
  }       
 });
});

.gallery-item {
  text-align: left;
  font-size: 25px;
  margin: 0 10px;
  padding: 10px 0;
}

.gallery-item .thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}

.gallery-contents { position: relative; }

.gallery-item .title {
 position:absolute; 
 bottom:0px; 
 left:0px;
 width:100%;
 background-color:#5ba4ee;
 color:#fff;
 font-size: 16px;
 font-weight: bold;
 text-transform: uppercase;
 padding: 5px 10px;
}


.dark-background, .background-active {
 background-color: rgba(112, 158, 202, 0.8);
 color: #fff;
 font-size: 16px;
 font-weight: bold;
 height: 100%;
 padding-top: 30%;
 position: absolute;
 text-align: center;
 text-decoration: none;
 width: 100%;
 z-index: 100;
 text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-item">
  <div class="gallery-contents">
    <div class="thumbnail gallery-trigger">
      <span>
        <span class="title">Gallery Item</span>
        <img src="https://cdn-main.123contactform.com/images3/landing_pages/free-small-business-forms.png" alt="" />
      </span>
    </div>
  </div>
</div>

Answer 1

只需添加以下规则：

.background-active.title {
  background: rgba(91, 164, 238, 0.5);
}

Answer 2

添加opacity:0.35（或任何想要的值）将解决不透明覆盖。如果您无法将文本垂直居中对齐，请查看 CSS flexbox。

结合活动背景 onclick 和 mouseover jquery

Combine the active background onclick and mouseover jquery

jquery

html

css

toggle

mouseover