jquery - 背景过渡添加类

Question

我正在寻找一种基于添加类来更改行背景的方法。

我在开发时给你举个例子:

https://www.ai6.it/#rowContattaci

当你在 div 类 #rowContattaci 之上传递图像时，将类 .hover 添加到 #rowContattaci ，但我可以不在后台添加转场效果，效果很快。

我想知道的是，添加背景效果的正确方法是正确的还是正确的但我做错了什么？

jQuery( ".customImageContattaci" ).hover(
  function() {
    jQuery('#rowContattaci').addClass( "hover" );
  }, function() {
    jQuery('#rowContattaci').removeClass( "hover" );
  }
);

#rowContattaci {
  background: white;
       padding-left: 0px !important;
    padding-right: 30% !important;
    transition: 1s;
    margin-left: 0% !important;
    left: 0px !important;
}
#rowContattaci.hover {
  background: url('https://www.ai6.it/wp-content/uploads/2018/08/contatti.jpg');
  transition: 2s !important;
}
#rowContattaci.hover .customImageContattaci {
  opacity: 0;
 transition: 2s !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rowContattaci" data-vc-full-width="true" data-vc-full-width-init="true" class="vc_row wpb_row vc_row-fluid eightRow sectionContattaci rowHome section" style="position: relative; left: -231.094px; box-sizing: border-box; width: 1920px; padding-left: 231.094px; padding-right: 242.906px;"><div class="wpb_column vc_column_container vc_col-sm-6"></div><div class="wpb_column vc_column_container vc_col-sm-6"><div class="vc_column-inner "><div class="wpb_wrapper"><div class="wpb_single_image wpb_content_element vc_align_center   customImageContattaci"><figure class="wpb_wrapper vc_figure"><div class="vc_single_image-wrapper   vc_box_border_grey"><img width="745" height="891" src="https://www.ai6.it/wp-content/uploads/2018/07/home-page-contatti.jpg" class="vc_single_image-img attachment-full" alt="" srcset="https://www.ai6.it/wp-content/uploads/2018/07/home-page-contatti.jpg 745w, https://www.ai6.it/wp-content/uploads/2018/07/home-page-contatti-251x300.jpg 251w, https://www.ai6.it/wp-content/uploads/2018/07/home-page-contatti-122x146.jpg 122w, https://www.ai6.it/wp-content/uploads/2018/07/home-page-contatti-42x50.jpg 42w, https://www.ai6.it/wp-content/uploads/2018/07/home-page-contatti-63x75.jpg 63w" sizes="(max-width: 745px) 100vw, 745px"></div></figure></div></div></div></div></div>

Answer 1

您可以将背景视为伪元素。下面是一个示例，其中我使用了可以轻松替换为类的悬停效果:

body {
  margin: 0;
  position: relative;
  height: 100vh;
  background: pink;
  z-index: 0;
}

body:before {
  content: "";
  position: absolute;
  z-index: -1;
  background: url(https://picsum.photos/800/600?image=1069);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  transition: 1s;
}

body:hover::before {
  opacity: 1;
}