更改CSS選擇器的孩子懸停在jQuery

下面這個基本的jQuery代碼，我將如何使mousout更改項目爲display:none？更改CSS選擇器的孩子懸停在jQuery

也可以這樣改進？

任何幫助，請

$(".image").hover(function() { 
     $(this).children(".image p").css({ display: 'inline' }); 
});

在jQuery的文檔的網站，我看到這一點：$(selector).hover(handlerIn, handlerOut)，但我不明白這裏怎麼應用它。

來源

2011-11-30 JasonDavis

$(".image").hover(function() { 
     $(this).children(".image p").show(); 
}, function() { 
     $(this).children(".image p").hide(); 
});

但是，爲什麼不使用純CSS呢？

.image:hover .image p { display:inline; }

來源

2011-11-30 00:27:34 ThiefMaster

I想使用CSS，但由於某種原因，我無法使其工作 – JasonDavis

爲什麼不用你的html + css創建另一個問題和jsfiddle？我相信有人能夠幫助你。 – ThiefMaster

另外我不知道你冷酷地把懸停事件放在這樣的選擇器列表中，我以爲你只能添加：懸停到最後一個項目，所以謝謝我學到了一些東西 – JasonDavis

你並不需要2個功能，如果你測試事件：

$(".image").hover(function(e) { 
     $(this).children("p").toggle(e.type === 'mouseenter'); 
});

這裏有一個演示：http://jsfiddle.net/U5QGU/

我還簡化了選擇，因爲你並不需要：

.image p

因爲你已經知道它的父母有.image

你可以a LSO做到這一點，而不是切換的：

$(".image").hover(function(e) { 
     $(this).children("p")[e.type === 'mouseenter' ? 'show' : 'hide'](); 
});

http://jsfiddle.net/U5QGU/1/

來源

2011-11-30 00:27:05 shredder

ThiefMaster也是正確的，但是這正是因爲你問它：

$(".image").hover(function() { 
     $(this).children(".image p").css({display:'inline'}); 
}, function() { 
     $(this).children(".image p").css({display:'none'}); 
});

來源

2011-11-30 00:33:33

他顯然想要隱藏/顯示那麼那些方法更合適。 – ThiefMaster

使用兒童的替代方法是提供選擇方面：

$(".image").hover(function() { 
    $("p", this).css({ display:'visible' }); 
}, function() { 
    $("p", this).css({ display:'none' }); 
});

使用單個功能如粉碎機所示：

$(".image").hover(function(e) { 
    var d = (e.type === 'mouseenter') ? 'visible' : 'none'; 
    $("p", this).css({ display: d }); 
});

來源

2011-11-30 00:40:08 mikepurvis

更改CSS選擇器的孩子懸停在jQuery

回答

相關問題