Question

首先发布在这里。我的代码如下。我这里的基本上是导航菜单（#nav）和徽标（#logo）。将鼠标悬停在#nav元素上时，我将鼠标悬停在不同的导航项上时，使用了数据href和图像链接来交换#logo图像。例如，将鼠标悬停在＆＃39; Blue＆＃39;徽标转到蓝色图像。在徘徊关闭时，下面的代码只是粘在最后查看的图像上。有没有办法在悬停时将其恢复到原始状态？

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属性设置默认图片网址，然后在mouseout上恢复为该网址：

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

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

2 个答案: