Question

所以我试图在codpen上制作笔，当我将鼠标悬停在小div上时，该div的颜色应用于大div（.wrapper）但是jquery悬停功能不起作用我已经查找了所有解决方案但其中没有解决方案似乎有用。这是我查找的解决方案w3School hover function

$(".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>

codepen link

所以我试图在codpen上制作笔，当我将鼠标悬停在小div上时，该div的颜色应用于大div（.wrapper）但是jquery悬停功能不起作用我已经查找了所有解决方案但其中没有解决方案似乎有用。这是我查找的解决方案

Answer 1

CSS中有包装器的背景css属性，但jquery中有background-color属性。尝试在jquery中使用background属性。

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

jQuery hover（）函数无效

1 个答案: