javascript - 将 div 悬停，通过 css sprite 更改其颜色，然后淡入另一个 div？

Question

我不太会写代码，但我想知道如何写这样的javascript:

首先，悬停 div(下面的'#menu1 a')并通过 CSS sprite 更改其颜色。

接下来，同时我想在它附近淡入另一个 div('#menu1_submenu')('#menu1 a')。

$(document).ready(function()
{$('#menu1 a').hover(
function(){ 
        $('#menu1 a').css('background-position', '0 -30px');
        $('#menu1_submenu').fadeIn('slow');
},
function(){
        $('#menu1 a').css('background-position', '0 30px');
        $('#menu1_submenu').fadeOut('slow');
}
);
});

我指的第二个函数是当鼠标离开 div('#menu1 a') 时。当鼠标关闭时，我想将 '#menu1 a' 移回第一个位置，所以我在那里写了 '0 30px'。这样可以吗？

哦，我还有一件事想问你们:

当 '#menu1 a' 悬停并出现 '#menu1-submenu' 时，我想保持 '#menu1_submenu' 出现，即使鼠标从'#menu1 a'，因为第二个div是子菜单。这意味着，当鼠标离开 '#menu1_submenu' 时，它最终会淡出。你如何设置它？

你能帮帮我吗？ :)

Answer 1

最好的方法是将子菜单放在悬停元素中。

<div id="menu1">
  <a>Menu
    <div class="submenu">
        submenu
    </div>
  </a>
</div>

看看这个 fiddle :http://jsfiddle.net/ewN3k/