1

ここに初投稿。私のコードは以下です。ここにあるのは、基本的にナビゲーション メニュー (#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 + '">');
});
});
4

2 に答える 2

1

だと思い#logoますdivか？その場合は、data属性を使用してデフォルトの画像 URL を設定し、マウスアウト時にその 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") + '">');
        }
    });
});
于 2012-04-10T09:16:34.027 に答える
0

あなたが何を求めているのかを正しく理解していれば、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;
}
于 2012-04-10T09:15:44.343 に答える