淡入老鼠的內容並隱藏在鼠標外面

Question

我通常需要#first到visibility:hidden，並且當鼠標懸停在它上面時，鼠標在淡出時會淡出。

編輯 小提琴：https://jsfiddle.net/vsdLk90s/1/

$("#one").on({ 
    mouseover: function() { 
     timer = setTimeout(function() { 
      $("#first").css('opacity', '1'); 
     }, 400); 
    }, 
    mouseout: function() { 
     clearTimeout(timer); 
     $("#first").css('opacity', '0', 'visibility', 'hidden'); 

    } 
}); 

Answer 1

當多個屬性來定義，你應該用一個圖來設置。

.css({ 
    'opacity': '0', 
    'visibility': 'hidden' 
}); 

一個更好的辦法是將有visibility:hidden設置一個類來#first，並切換根據條件類的東西..在這些線路。

$("#one").on({ 
    mouseover: function() { 
     timer = setTimeout(function() { 
      $("#first").removeClass('hidden').css('opacity', '1'); 
     }, 400); 
    }, 
    mouseout: function() { 
     clearTimeout(timer); 
     $("#first").css({ 
      'opacity': '0' 
     }).addClass('hidden'); 

    } 
}); 

Check Fiddle

Answer 2

月

是也可能不是你的問題，但我相信你需要更換下面幾行：

$("#first").css('opacity', '1'); 

和

$("#first").css('opacity', '0', 'visibility', 'hidden'); 

需要成爲：

$("#first").css({'opacity': '1'}); 

和

$("#first").css({'opacity': '0', 'visibility': 'hidden'}); 

你可能還需要在懸停 '切換回' 能見度很低，像這樣：

$("#first").css({'visibility': 'visible', 'opacity', '1'}); 

參考在JQuery的使用」的CSS：https://api.jquery.com/css/

TL; DR：而不是用逗號分隔屬性和期望值，您需要使用一個冒號（:)，你需要括在部分的CSS {}

編輯：

如果你想在網頁加載時不被顯示的DIV，然後只在懸停顯示將下面的代碼添加到樣式表中：

#first { 
    visibility:hidden; 
}