jquery img类覆盖

Question

我正在尝试在我的图片框类中添加红色叠加层，但我无法得到结果，因为：  新的overlay类替换旧的，我只获得红色背景。 我需要新课程，而不是旧课程。

这是我到目前为止所尝试的：

$(function($) {
  $(document).on('click', '.wrapper', function(event) {
    var target = $(event.target).closest('.wrapper');
    
	target.find('.image-box').addClass("overlay");
    
  });
});

.image-box {
    height: 300px;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    background-position: center;
    background-color: #4D4E56;
}

.overlay{
	background-color:rgba(86, 61, 124, 0.55);
	transition: 0.5s;
	filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    height:150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image-box"></div>
  </div>

Answer 1

您可以使用：after添加叠加层。检查更新的代码。

＆＃13;

＆＃13;

$(function($) {
  $(document).on('click', '.wrapper', function(event) {
    var target = $(event.target).closest('.wrapper');
    
	target.find('.image-box').addClass("overlay");
    
  });
});

＆＃13;

.image-box {
    height: 300px;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    background-position: center;
    background-color: #4D4E56;
  position: relative
}
.image-box:after {
  opacity: 0;
  background-color: rgba(86, 61, 124, 0.55);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  transition: opacity 5s;
}
.overlay:after {
  opacity: 1;
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image-box"></div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果我更了解你，下面是代码片段。

＆＃13;

＆＃13;

$(function($) {
  $(document).on('click', '.wrapper', function(event) {
    $(this).find('.image-box').addClass("overlay");
  });
});

＆＃13;

.image-box {
    height: 300px;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    background-position: center;
    background-color: #4D4E56;
}

.overlay{
	/*background-color:rgba(86, 61, 124, 0.55);*/
  background-color:rgba(255, 0, 0, 1);
	transition: 0.5s;
	filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    height:300px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="wrapper">
<div class="image-box"></div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您是否尝试更改.overlay＆amp;图像框属性

.image-box{
 /* add position:relative */
}
.overlay{
position:absolute; background-color:red; filter:alpha(opacity=50); opacity: 0.8; height: 100%; width: 100%; opacity: 1; z-index: 9; position: absolute; top: 0; opacity: 0.5;transition: 0.5s; 
}

点击图片框时，它会在图像框上显示叠加层