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

Question

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

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

<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');
  });
});

提前致谢。

标签： jqueryhtmlcss

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');
    });
});