jquery - 将鼠标悬停在导航栏上，将透明 Logo 更改为填充 Logo

Question

当用户将鼠标悬停在导航栏上时，我试图让我的 Logo 从透明背景变为填充背景。

目前，我的 JQuery 在悬停时工作，但当用户离开导航时， Logo 不会变回透明 Logo 。

<div class="logo">
  <a class="navbar-brand" href="/"> 
    <img src="/Includes/images/holts-logo-trans.png" class="img-fluid" />
  </a>
</div>

$(document).ready(function () {
  $('.navbar-light').hover(function () {
    $('.logo a img').attr('src', '/Includes/images/holts-logo-fill.png');
  });
});

提前致谢。

Answer 1

hover()接受两个函数；第一个在鼠标进入时调用，第二个在鼠标离开元素时调用。

所以需要在第二个函数中设置透明logo图片:

$(document).ready(function () {
    $('.navbar-light').hover(function () {
        $('.logo a img').attr('src', '/Includes/images/holts-logo-fill.png');
    }, function() {
        $('.logo a img').attr('src', '/Includes/images/holts-logo-trans.png');
    });
});