结合活动背景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。