將顯示/隱藏類div應用於每個不同內容的div

這可能是一個簡單的問題，但嘗試幾個方法後，我需要一些建議。將顯示/隱藏類div應用於每個不同內容的div

我有一些div，當你將鼠標懸停在它們上面時，會爲每個div顯示另一個不同內容（表現得像一個工具提示）。我提供的jsFiddle在紅色div上顯示了它的一個例子。我試圖通過jQuery實現的是，當你將鼠標懸停在任何其他div展示div內容。

目前，我有2個div（藍色和紅色），只能讓它與jQuery提供的紅色一起工作。這將如何爲多個div工作？

我會很容易地使用一個工具提示插件，但是我在這個插件中使用了這個例子，它們與滑塊內的工具提示衝突很糟糕。

$('.red').hover(function() { 
     $(".tooltip").fadeIn(250); 
    }, function() { 
     $(".tooltip").fadeOut(250); 
    });

如果有人能指導我從哪裏開始，這將是巨大的。

感謝

PS *我將有超過10 div的紅色，BLUC，粉紅色，綠色等..

來源

2013-07-04 user2212564

你不能添加普通類所有的人？類似於class =「red showtip」，class =「blue showtip」，class =「pink showtip」，然後任何$（this）.next（）函數都可以工作，並且可以根據需要添加更多顏色 – pathfinder

如果您想要放置日你可以做到這一點

$(document).ready(function() { 
    $('.red,.blue').hover(function() {   
     $(this).next(".tooltip").fadeToggle(250); 
    }); 
});

http://jsfiddle.net/Sq5nP/

通過CSSË提示您可以使用+相鄰的選擇，如果你的提示將永遠是下一個兄弟

.red+.tooltip { 
    display:none; 
    background-color:#993; 
    width:50px; 
    height:50px; 
    position:absolute; 
    right:60px; 
    top:40px; 
} 
.blue+.tooltip { 
    display:none; 
    background-color:blue; 
    width:50px; 
    height:50px; 
    position:absolute; 
    right:170px; 
    top:10px; 
}

http://jsfiddle.net/yyrp7/

來源

2013-07-04 14:50:34

隨着多種選擇

$(document).ready(function() { 
    $('.red, .blue').hover(function() { 
     $(".tooltip").fadeIn(250); 
    }, function() { 
     $(".tooltip").fadeOut(250); 
    }); 
});

Demo Fiddle

來源

2013-07-04 14:46:47

這很棒，但是兩個div都顯示'藍色盒子信息'，而不是紅色的紅色信息，藍色的藍色信息:)你的演示確實有意義！ – user2212564

您可以通過$（this）獲得選擇器..基於此，您可以顯示您確切需要的位置。 –

那麼，有沒有簡短的方式來編寫代碼？：http://jsfiddle.net/DeRx8/4/謝謝你的迴應球員 – user2212564

可以做

$(document).ready(function() { 
$('.red,.blue').hover(function() { 
    $(this).next(".tooltip").fadeIn(250); 
}, function() { 
    $(this).next(".tooltip").fadeOut(250); 
}); 
});

http://jsfiddle.net/DeRx8/3/
UPDATE

$(document).ready(function() { 
$('.red,.blue').hover(function() { 
    var left=$(this).offset().left+$(this).width()-40; 
    $(this).next(".tooltip").css("left",left).fadeIn(250); 
}, function() { 
    $(this).next(".tooltip").fadeOut(250); 
}); 
});

位置.tooltip
http://jsfiddle.net/DeRx8/5/

來源

2013-07-04 14:48:33

你的回答是正確的，但看了代碼後，我可能不得不改變它，你看到我需要藍色工具提示懸停div放在旁邊，所以它意味着造型不同的工具箱類？ – user2212564

你有位置絕對所以.tooltip所有位置相同，你可以改變HTML或設置位置與jQuery –

@ user2212564你可以做到這一點，通過CSS使用相鄰的選擇器，如果他們總是下一個兄弟http：// jsfiddle.net/yyrp7/ –

將顯示/隱藏類div應用於每個不同內容的div

回答

相關問題