javascript - 将鼠标悬停在链接上并更改 div 的背景图像 - JQuery

Question

当我将鼠标悬停在链接上时，我无法更改 div 的背景图像，代码对我来说看起来不错，所以我不知所措，这里是代码:

Javascript:

   $('#hover-01').on('mouseover', function(){
   $('#hover-change').css('background-image', 'url("images/1.jpg")');
});
$('#hover-01').on('mouseout', function(){, function(){
  $('#hover-change').css('background-image', 'url("images/5.jpg")');
});

HTML:

 <div class="open-project-link">
    <a id="hover-01" class="open-project"  
   href="project3.html">Bowman Clay</a>
    </div>


<div class="responsive-section-image" id="hover-change" 
 style="background-image: url(images/5.jpg);">
  <div class="overlay"></div>
                         </div>

jQuery版本:v2.1.1

有什么想法或建议吗？

编辑:代码确实可以工作，但是这是第 3 方插件的问题(我认为)，所以我用普通的 javascript 而不是 jQuery 修复了它

Answer 1

'mousein' 不是您可以使用的事件处理程序。您应该使用 mouseover 和 mouseout，或 mouseenter 和 mouseleave。请参阅 jQuery 鼠标事件 here 。

您还需要为容纳图像的容器指定宽度/高度，因为它没有内容。另外，您的 mouseout 函数中有两个 function() 声明，我在以下代码示例中修复了它:

  $('#hover-01').on('mouseenter', function(){
   $('#hover-change').css('background-image', 'url(http://www.w3schools.com/css/trolltunga.jpg)');
});
$('#hover-01').on('mouseleave', function(){
  $('#hover-change').css('background-image', 'url(https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4)');
});

#hover-change {
  width:1000px;
  height:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open-project-link">
    <a id="hover-01" class="open-project"  
   href="project3.html">Bowman Clay</a>
    </div>


<div class="responsive-section-image" id="hover-change">
  <div class="overlay"></div>
</div>