jquery調整div時懸停在另一個div

我有一些img圖標鏈接到各種外部網站（電子郵件，臉譜，微博等）onclick，我試圖讓他們在另一個div顯示一些隱藏的文字懸停。jquery調整div時懸停在另一個div

this thread中的第二個小提琴鏈接完成了類似於我想用CSS做的事情，但是我試圖使用jQuery slideToggle()（我已經在頁面的其他部分中實現）對顯示/隱藏進行動畫顯示，所以CSS不會這樣做。

This thread好像有我在找的東西，但我用它作爲模板，目前爲止沒有任何工作，我很難過。這裏是我的代碼，任何建議將不勝感激：

$('div.tooltip').hide(); 
$('img.tooltip').hover(function() { 

    which = $(this).attr("class"); 
    selector = 'div.' + which; 
    slide = $(selector).slideToggle(); 
    console.log(slide); 
});

p.s. - 我想也許問題是，當我打電話給slideToggle()時，它並沒有撤消第1行的hide()調用，但是當我將該調用註釋掉，而改爲像字體顏色一樣簡單的東西時，仍然沒有骰子。

編輯：爲了澄清，img及其相應div份額相同的類名（例如img.tooltip email應該觸發div.tooltip email等），這就是爲什麼我使用「的」和「選擇」。

來源

2013-09-24 wkd

創建一個小提琴請 – SarathSprakash

img元素有任何其他類嗎？如果它的確如''selector'的值看起來像：''div.tooltip otherClass andAnotherone andSoOn「'。這不會是一個有效的jQuery選擇器，但很難知道沒有看到標記。 –

是否

slide = $('div.tooltip').slideToggle();

不行？我很困惑，爲什麼你需要該功能的前兩行。

來源

2013-09-24 09:19:53 mitchfuku

這有效，但它顯示每個工具提示，當我只想顯示屬於觸發slideToggle的圖標。認爲我的問題與@DGS描述的css嵌套有關 – wkd

你的問題比線which = $(this).attr("class");更可能返回空格分隔的元素所有類的列表。由於圖片至少有.tooltip，這意味着selector看起來像div.tooltip someotherclass，它將尋找someotherclass類型的元素，它是具有類工具提示的div的後代。由於將有可能不存在元素類型someotherclass，因此這將不會返回任何內容。

編輯：

如果你只使用像你的問題的情況下，兩個類，您可以更改您的代碼

$('img.tooltip').hover(function() { 
    which = $(this).attr("class").replace('tooltip', '').replace(' ',''); 
    selector = 'div.' + which; 
    slide = $(selector).slideToggle(); 
    console.log(slide); 
});

將從String類製作which = 'email'而不是刪除tooltip類which = 'tooltip email'

來源

2013-09-24 09:20:32 DGS

哎呀，也許我剛剛得到了一個基本的語法錯誤 - 我希望'img'具有**'tooltip'和'email/facebook/etc'類，並懸停應該'slideToggle''div'具有相同的類名稱。是否將這些類與w/a空間分開不這樣做？ – wkd

不，因爲當你執行'$（this）.attr（「class」）'時，它將返回一個字符串，該字符串以空格分隔格式包含該元素的所有類。我的答案沒有擺脫它的工具提示類，它只是在尋找類時忽略它的元素 – DGS

好吧 - 我不明白爲什麼獲取空格分隔字符串會很糟糕，但只要我追加該字符串到''div.''，因爲我正在使用'selector'。這個解決方案給我帶來了一個錯誤，它看起來像插入了一個空格來代替'tooltip'，所以選擇器最終成爲'div。 email'。我從來沒有小提琴，我無法正常工作，但這裏有一個，如果有幫助：http://jsfiddle.net/B5s56/ – wkd

jquery調整div時懸停在另一個div

回答

相關問題