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

Posted 2023-05-09

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

【英文标题】：How do I edit the below jQuery to return the hover logo change to original state?

【发布时间】：2012-04-22 13:48:43

【问题描述】：

第一篇文章在这里。我的代码如下。我在这里拥有的基本上是一个导航菜单 (#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 + '">');
);
);

【问题讨论】：

您是否误错过了#nav？ $('#nav').on('hover', 'li', function()

尝试将 nav 替换为 "#nav" 并删除 var nav = $('#nav')[0]，不使用 var 输出并且您有未定义的 logo 变量（应该将 logo 替换为输出？）

您的 php 与 jQuery 无关。我们需要查看 HTML，而不是服务器端脚本。

【参考方案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") + '">');
        
    );
);

【讨论】：

罗里，感谢您的回答。它有点工作，但不完全。基本的默认图像有效，但现在由于某种原因图像在悬停时不会改变。 #logo 实际上是一个

【参考方案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;

【讨论】：

嗨，马特，感谢您的评论。它与您在此处描述的内容相似，但 #logo 未嵌套在列表中，因此我认为使用 jQuery 定位会更容易。虽然我想如果需要我可以绝对定位两个内部 标签。谢谢。