如何编辑下面的 jQuery 以将悬停徽标更改返回到原始状态？

Question

第一篇文章在这里。我的代码如下。我在这里拥有的基本上是一个导航菜单 (#nav) 和一个徽标 (#logo)。当悬停在#nav 元素上时，当悬停在不同的导航项上时，我使用了 data-href 和图像链接来交换 #logo 图像。例如，将鼠标悬停在“蓝色”上，徽标会转到蓝色图像。但是，在悬停时，下面的代码只会停留在最后一个查看的图像上。悬停时有没有办法让它恢复到原来的状态？

HTML：

<ul id="nav">
    <li data-href="<?php bloginfo('template_url'); ?>/images/logo-marketing.png" class="nav1"><a href="<?php bloginfo('url'); ?>/marketing">Marketing</a></li>
    <li data-href="<?php bloginfo('template_url'); ?>/images/logo-consultancy.png" class="nav2"><a href="<?php bloginfo('url'); ?>/consultancy">Consultancy</a></li>
    <li data-href="<?php bloginfo('template_url'); ?>/images/logo-project-management.png" class="nav3"><a href="<?php bloginfo('url'); ?>/project-management">Project Management</a></li>
    <li data-href="<?php bloginfo('template_url'); ?>/images/logo-production-engineering.png" class="nav4"><a href="<?php bloginfo('url'); ?>/production-engineering">Production & Engineering</a></li>
    <li data-href="<?php bloginfo('template_url'); ?>/images/logo-innovation.png" class="nav5"><a href="<?php bloginfo('url'); ?>/innovation">Innovation</a></li>
</ul>

Javascript：

$(window).load(function(){
var nav = $('#nav')[0];
var output = $('#logo')[0];

$(nav).on('hover', 'li', function() {
    $(this).stop().addClass('selected').siblings().removeClass('selected');
    var url = $(this).stop().data('href');
    $(logo).html('<img src="' + url + '">');
});
});

Answer 1

我假设#logo 是div？如果是这样，使用data 属性来设置它的默认图像url，然后在鼠标移出时恢复到那个：

<div id="logo" data-defaultimg="myimg.jpg"><img /></div>

$(function(){
    var $nav = $('#nav');
    var $logo = $('#logo');

    $nav.on('hover', 'li', function(e) {
        if (e.type == 'mouseover') {
            var url = $(this).addClass("selected").siblings().removeClass("selected").data("href");
            $logo.html('<img src="' + url + '">');
        }
        else {
            $(this).siblings().removeClass("selected"); 
            $logo.html('<img src="' + $logo.data("defaultimg") + '">');
        }
    });
});

Answer 2

如果我正确理解您的需求，则不需要 jquery。

<ul id="logo_list">
  <li class="logo_item">
     <div class="logo_default"> put stuff as if item is not hovered </div>
     <div class="logo_hovered"> put stuff as if item is hovered </div>
  </li>
</ul>

.logo_hovered
{
   display:none;
}

.logo_item:hover .logo_default
{
  display:none;
}

.logo_item:hover .logo_hovered
{
  display: block;
}