如何淡入使用jquery懸停/鼠標懸停div？

我有一個設置爲display:hidden的div。當某個元素（#navbar li a）懸停時，我希望將此div設置爲display:block。這是我的JavaScript。如何淡入使用jquery懸停/鼠標懸停div？

$('document').ready(function(){ 
    $("#navbar li a").onmouseover(function{ 
     $("#navbar ul").css("display","block"); 
    }); 
});

我知道$("#navbar li a")的目標是正確的元素，因爲我已經測試了這一點。我的JavaScript代碼有什麼問題嗎？

編輯：這是一個下拉菜單。 #navbar ul是一個嵌套列表。

來源

2013-07-19 Sam D20

沒有「的onmouseover」

正確syntaxsis是：

$("#navbar li a").on("mouseover", function(){ 
    $("#navbar ul").show() //Can use just show here 
})

來源

2013-07-19 20:25:54 drip

是的，有什麼不對的代碼，jQuery的沒有一個onmouseover事件，你在做什麼可能尋找的是mouseenter事件，如汽車無上鼠標移動mouseover火災：

$(document).ready(function(){ 
    $("#navbar li a").on('mouseenter', function(){ 
     $("#navbar ul").show(); 
    }); 
});

，另一方面

，你也許可以做到這隻與CSS？

來源

2013-07-19 20:26:03 adeneo

使用.hover

$('document').ready(function(){ 
    $("#navbar li a").hover(function(){ 
     $("#navbar ul").css("display","block"); 
    }); 
});

如果你想在效果淡入就用.fadeIn

DEMO

$(function() { 
$('#div1').hover(function() { 
    $('#div2').fadeIn(); 
}, function() { 
    $('#div2').fadeOut(); 
}); 
});

爲了完整這裏有一個CSS唯一的方法：

（僅供參考，使用這種方法不會流行E - 這是每說，只是讓出現在盤旋，然後消失當不上懸停。）

DEMO

#div2 { 
    width: 200px; 
    height: 200px; 
    background: red; 
    display: none; 
} 

#div1:hover ~ #div2 { 
    display: block;  
}

來源

2013-07-19 20:26:36 Vector

所有的答案都顯示/隱藏。你的代碼也是。問題是關於褪色。

使用.fadeIn() .fadeOut而不是顯示隱藏

http://api.jquery.com/fadeIn/

來源

2013-07-19 20:30:21 zod

如果你想在div實際上褪色從不透明到100％，那麼你已經開始用不透明的說80％（顯示爲0.8）然後褪去100％（顯示爲1.0）。既然你想從不透明度開始，div需要用「無顯示」來隱藏，那麼可以在不看到效果的情況下設置不透明等級，然後使其可見並且褪色到100％：

$("div.mydivclass").on("mouseenter", function() { 
    $(this).css("display", "none"); 
    $(this).fadeTo("fast", 0.8); 
    $(this).css("display", ""); 
    $(this).fadeTo("10", 1.0); 
});

來源

2015-08-03 00:28:34

如何淡入使用jquery懸停/鼠標懸停div？

回答

相關問題