懸停div jquery
[英]Hover div jquery
問題描述
這是我的腳本：
<body>
<div id ="mainCategory" class='fade'>
Category</div>
<div id="divSubCategory">
Category1
<br />
Category2
</div>
<script type="text/javascript">
$("div").hover(
function () {
$(this).append($("#divSubCategory").html());
},
function () {
$("#divSubCategory").remove();
}
);
$("#divSubCategory.fade").hover(function () { $(this).fadeOut(100); $(this).fadeIn(500); });
</script>
</body>
我想在mainCategory懸停上顯示和隱藏divSubCategory。 但它不起作用。 我應該添加什么？
4 個解決方案
解決方案1
8 已采納 2012-06-29 08:02:59
$(document).ready(function(){
$('#mainCategory').bind('mouseenter', function() {
$('#divSubCategory').fadeIn();
});
$('#mainCategory').bind('mouseleave', function() {
$('#divSubCategory').fadeOut();
});
});
解決方案2
2 2012-06-29 08:08:10
好吧，問題是你正在使用.html() 。 這復制了內部html（不是外部的<div id="divSubCategory"></div>位...只是中間的位。
因此，當你執行$('#divSubCategory').remove()它會刪除HTML中的實際div，而不是你移動到上面div中的HTML。
假設你在#divSubCategory上有display: none ，你會看到該div中的文本被附加到第一個div，然后當你鼠標移出時它不會消失（雖然第二個（隱藏的）div會被刪除）。
無論如何，繞過這個方法是使用clone() 。 我會為你做一個小提琴：
我也為你修復了你的褪色。
編輯：這使div#divSubCategory到div#mainCategory顯示之前，然后從那里完全刪除它，當你鼠標移開-這就是我假設你想從你的代碼來完成。 尼克斯只是展示並隱藏它的位置。 根據您的需要，這兩個答案都是正確的。 :)
解決方案3
1 2012-06-29 08:19:43
這是100％符合您的要求：
檢查一下： http ： //jsfiddle.net/ZWqnk/8/
解決方案4
-3 2012-06-29 07:59:17
將代碼包裝在document.ready（）函數中
$(document).ready(function(){
// Your code here
});
jQuery div選擇？ 懸停時
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.