Question

我使用光滑的滑块，一切正常。有两张幻灯片。将鼠标放在其中一个幻灯片上时，需要设置半透明背景并添加一个按钮

我的HTML

<div class="wrapper_middle_btn">
            </div>
            <div class="wrapper_vn">
                  <input class="middle_btn" type="button" onclick="#" value="Замовити">
            </div>

wrapper_middle_btn{

  display: flex;
  align-items: flex-end;
  height: 350px;
  position: absolute;
  width: 9.9%;
  bottom: 10%;
  padding-top: 20px;

  opacity: 0;
  background: #000;


}
.middle_btn {

  color: white;
  width: 100%;
  height: 50px;
  background: red;

}
 .wrapper_vn{
   opacity: 0;
  display: flex;
  align-items: flex-end;
  height: 50px;
  position: absolute;
  width: 9.9%;
  bottom: 0;
  padding-top: 20px;
}


$(function() {
  $('.wrapper_middle_btn').hover(function() {
    $('.wrapper_vn').css('opacity', '1');
    $('.wrapper_middle_btn').css('opacity', '0.5');
  }, function() {
    // on mouseout, reset the background colour
    $('.wrapper_vn').css('opacity', '0');
    $('.wrapper_middle_btn').css('opacity', '0');
  });
});
$(function() {
  $('.wrapper_vn').hover(function() {
    $('.wrapper_vn').css('opacity', '1');
    $('.wrapper_middle_btn').css('opacity', '0.5');
  }, function() {
    // on mouseout, reset the background colour
    $('.wrapper_vn').css('opacity', '0');
    $('.wrapper_middle_btn').css('opacity', '0');
  });
});

当悬停在一张幻灯片上时，背景设置为两个滑块。帮助

设置幻灯片悬停的背景

0 个答案: