jquery通過將鼠標懸停在另一個元素上動畫製作一個元素

Question

我在jquery中創建了一個成功的（幾乎）動畫，但現在需要一個文本說「點擊」。每當我將鼠標懸停在由超過事件變寬的div上時出現。這個事件使得進入時的div更寬，離開時更窄，這是有效的。

所以，我想是這樣的：

if($(this).width() >= "25") // if the width is greater than 25 
    $("#clickme").css('opacity', 0) // - effect a DIFFERENT id which is my "click.." 

在鼠標離開，當然還有，做相反。 我不能得到這個迄今

我有糊箱http://pastebin.com/AQwLeBbc

任何線索jQuery的部分工作？

Answer 1

如果您想將div放在另一個元素上，可以使用css進行固定或絕對定位。 你可以得到正被在與徘徊當前元素的位置：

.offset() 

http://api.jquery.com/offset/

然後使用偏移（）來設置你的懸停div的位置。 如果你想讓div懸停在所有的東西上，最好把它作爲身體的第一個元素。

Answer 2

這完成了你想要的。它使用.hover（）函數爲對象分配兩個處理程序，一個用於鼠標輸入，另一個用於鼠標輸出。

$('.selector').each(function() { 
     var clicktext = null; 
     $(this).hover(function() { 
       var pos = $(this).offset(); 
       // add the click text and assign it to the proper variable 
       // this code can be changed to what ever it takes for your code 
       // just make sure to leave the zIndex at a greater than 0 value 
       // and the position values as they are. Padding, etc. are optional. 
       clicktext = $('<div>').css({ 
         zIndex: 1000, 
         padding: "2px", 
         position: "absolute", 
         left: pos.left, 
         top: pos.top 
       }).text("click").appendTo('body'); 
     }, function() { 
      clicktext.remove(); 
     }); 
}); 

-Sunjay03