不透明度沒有設置懸停

我有一個基本的下拉菜單。當我將鼠標懸停在不同的菜單上時，它應該設置爲opacity: 1。它開始於.5。不透明度沒有設置懸停

這裏是我的jQuery的懸停部分：

$('#cat1 > li > a').hover(function() { 
    $(this).css({ 
     color: '#dc692e', opacity: 1 
    }); 
}, function() { 
    $(this).css({ 
     color: '#fff', opacity: .5 
    }); 
});

以下是完整的小提琴：http://jsfiddle.net/Nilzone/HnmHh/

感謝您的幫助！

來源

2013-07-05 Nilzone-

我修好了你的小提琴。至少*嘗試*使用可用的工具。 http://jsfiddle.net/HnmHh/1/只要使用「JSHint」就會給你一堆錯誤。另外，爲什麼你不使用CSS呢？ –

如果你還解釋了你正在發生的事情，而不是簡單地說出你想要發生的事情，那會更好。 – Joum

像上面，我會使用RGBA –

使用$('#cat1 > li > a').hover(...不起作用，因爲在該代碼運行時a元素實際上還不存在。您需要任何附加的要素（$.getJSON()回調中）後立即運行的代碼，或者最初存在的元素上使用委派的事件處理程序：

$('#cat1').on({ 
    mouseenter : function() { 
     $(this).css({ 
     color: '#dc692e', opacity: 1 
     }); 
    }, 
    mouseleave : function() { 
     $(this).css({ 
     color: '#fff', opacity: .5 
     }); 
    } 
},'li > a');

演示：http://jsfiddle.net/HnmHh/11/

傳遞的選擇'li > a'作爲.on()的單獨參數在每次事件發生時都進行測試，所以處理程序在動態添加元素上工作。

如果您爲此使用CSS，您將不會遇到此問題，因爲CSS規則將應用於動態添加的元素。

來源

2013-07-05 11:13:18 nnnnnn

工作就像一個魅力，謝謝。但基於其他意見，我真的應該使用CSS來代替！編輯：另外，非常好的解釋！ –

謝謝。是的，CSS是達到這種效果的方式，但理解讓JavaScript解決方案起作用的原則很重要，因爲這將適用於CSS無法幫助您的其他情況。人們經常會問爲什麼他們的事件處理程序不能在動態添加的元素上工作。 – nnnnnn

您可以使用動畫更改不透明度。

$('#cat1 > li > a').hover(function() { 
    $(this).animate({opacity: 1}, 500); 
});

來源

2013-07-05 11:14:32

不透明度沒有設置懸停

回答

相關問題