我的目標是:如何淡出一個div並淡入另一個div?
- 在鼠標懸停時,淡出「富」和「酒吧」
- 在鼠標淡出,淡出「酒吧」和「富」
我可以在鼠標上淡出'foo',但當我將鼠標移動到'bar'div之外時,我無法淡入'bar',然後返回到正常狀態。
我有以下代碼:
HTML
<ul>
<li>
<div class="foo"></div>
<div class="bar"></div>
</li>
<li>
<div class="foo"></div>
<div class="bar"></div>
</li>
</ul>
CSS
li .bar { display: none; }
JS
// On mouse over, fade out 'foo' and fade in 'bar'
jQuery('.foo').mouseover(function() {
jQuery(this).fadeOut(function() {
jQuery('.bar').fadeIn(); <-- This is wrong. I need to get the bar inside this li
});
// On mouse out, fade out 'bar' and fade in 'foo'
jQuery('.bar').blur(function() {
jQuery(this).fadeOut(function() {
jQuery('.foo').fadeIn();
});
這裏是我的不好的jsfiddle嘗試:http://jsfiddle.net/TvCT5/2/
欣賞正確的方向:)
是啊,我的意思是使用'mouseout'而不是'blur'。它不適合你的第一個解決方案。我認爲j08691擊敗你:) +1爲好解釋! – Steven 2012-03-04 00:16:14