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

谢谢。

Answer 1

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

因此，您需要在第二个功能中设置透明徽标图像：

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

Answer 2

您可以尝试mouseover和mouseout事件

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

jQuery

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

将鼠标悬停在导航栏上，将透明徽标更改为实心徽标

2 个答案: