为什么doe的悬停功能不起作用？ （jQuery）

Question

每当用户将鼠标悬停在链接上时，我都被要求将图像更改为另一个图像。

我写了以下代码-

$(document).ready(function(){

    $(".block-boxes-os_sv_list_box h1 a").on("hover", function(){
         $(".image-style-profile-thumbnail").attr("src","https://openscholar.huji.ac.il/sites/default/files/buberinstitute/files/buber_logo.png?m=1554038720");
    });

})

但是它不起作用。有什么想法吗？

目前-结果是什么都没发生

Answer 1

从jQuery 1.8开始不推荐使用：名称“ hover”用作字符串“ mouseenter mouseleave”的简写。它为这两个事件附加一个事件处理程序，并且处理程序必须检查event.type以确定该事件是mouseenter还是mouseleave。不要将“ hover”伪事件名称与.hover（）方法混淆，该方法接受一个或两个函数。

  

来源：http://api.jquery.com/on/#additional-notes

我只是用HTML编写了一个有效的示例，希望对您有所帮助。谢谢

$(document).ready(function(){
    $(".block-boxes-os_sv_list_box h1 a").hover(function() {
      $(".image-style-profile-thumbnail").attr("src","https://openscholar.huji.ac.il/sites/default/files/buberinstitute/files/buber_logo.png?m=1554038720");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block-boxes-os_sv_list_box">
  <h1>
    <a href="#">Test</a>
  </h1>
</div>

<image src="" class="image-style-profile-thumbnail" alt="" />

Answer 2

与.on()一起使用时，您只是在使用错误的关键字进行悬停

$("button").on("mouseover", function() {
  console.log('works')
  $("img").attr("src", "https://placehold.it/100x200");
});

$("button").on("hover", function() {
  console.log('not working')
  $("img").attr("src", "https://placehold.it/100x200");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Change on hover</button>
<img src="https://placehold.it/200x300" />