jQuery悬停()函数不能工作

Question

因此，我试图在codpen上做一支笔，当我在小div上悬停时，这个div的颜色应用于大div(.wrapper)，但是jquery函数不起作用，我已经查找了所有的解决方案，但它们似乎都不起作用。下面是我查找w3School悬停函数的解决方案

​

$(".g1").hover(function(){
    $(".wrapper").css("background-color", "yellow");
    }, function(){
    $(".wrapper").css("background-color", "pink");
});

.wrapper{
  height:50px;
  border-radius:25px;
  background: linear-gradient(to right, #F24645  ,  #EBC08D);
}
.main-box{
  margin-top:20px;
}
.box{
    width: 100px;
    height: 50px;
    margin:10px;
    float: left;
    border-radius:50px;
    background: #000;
}
.g1{
  background: linear-gradient(90deg, #1CB5E0 0%, #000851 100%);   
}

.g2{
  background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
}
.g3{
  background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
}
.g4{
  background: linear-gradient(90deg, #3F2B96 0%, #A8C0FF 100%);
}
.g5{
  background: linear-gradient(90deg, #FDBB2D 0%, #22C1C3 100%);
}
.g6{
  background: linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%);
}
.g7{
  background: linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%);
}
.g8{
  background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
}
.g9{
  background: linear-gradient(90deg, #9ebd13 0%, #008552 100%);
}
.g10{
  background: linear-gradient(90deg, #0700b8 0%, #00ff88 100%);
}
.g11{
  background: linear-gradient(90deg, #d53369 0%, #daae51 100%);
}
.g12{
  background: linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
}
.g13{
  background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
}
.g14{
  background: linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%);
}
.g15{
  background: linear-gradient(90deg, #fcff9e 0%, #c67700 100%);
}
.g16{
    background: linear-gradient(90deg, #00537E    0%, #3AA17E 100%);
}
.g17{
  background: linear-gradient(90deg, #009E00    0%, #FFFF96 100%);
}
.g18{
  background: linear-gradient(90deg, #312A6C    0%, #852D91 100%);
}
.g19{
  background: linear-gradient(90deg, #F24645    0%, #EBC08D 100%);
}
.g20{
  background: linear-gradient(90deg, #00B7FF    0%, #FFFFC7 100%);
}
.g21{
  background: linear-gradient(90deg, #3A3897    0%, #A3A1FF 100%);
}
.g22{
  background: linear-gradient(90deg, #00FFA1    0%, #00FFFF 100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="b1" class="wrapper"></div>
<div class="main-box">
  <div class="box g1"></div>
  <div class="box g2"></div>
  <div class="box g3"></div>
  <div class="box g4"></div>
  <div class="box g5"></div>
  <div class="box g6"></div>
  <div class="box g7"></div>
  <div class="box g8"></div>
  <div class="box g9"></div>
  <div class="box g10"></div>
  <div class="box g11"></div>
  <div class="box g12"></div>
  <div class="box g13"></div>
  <div class="box g14"></div>
  <div class="box g15"></div>
  <div class="box g16"></div>
  <div class="box g17"></div>
  <div class="box g18"></div>
  <div class="box g19"></div>
  <div class="box g20"></div>
  <div class="box g21"></div>
  <div class="box g22"></div>
  
  
  
  
</div>

​

代码链接

因此，我试图在codpen上做一支笔，当我在小div上悬停时，这个div的颜色应用于大div(.wrapper)，但是jquery函数不起作用，我已经查找了所有的解决方案，但它们似乎都不起作用。下面是我查到的解决方案

Answer 1

您的CSS中有包装器的背景css属性，但jquery中有背景颜色属性。也尝试在jquery中使用背景属性。

$(".g1").hover(function(){
    $(".wrapper").css("background", "yellow");
    }, function(){
    $(".wrapper").css("background", "pink");
});