2011-09-20 76 views
0

下面的代碼不起作用。我希望當鼠標懸停在div上,class ='row'顯示子div時。我習慣於JavaScript,但我現在正在適應jQuery。我如何做到這一點?Jquery懸停幫助

<script type="text/javascript"> 
$(function() { 
$('.block').hide(); 
$('.row').hover(function() { 
$('.block').show(); 

}); 

}); 
</script> 
<?php 

echo "<div class='row'><div class='block'>one</div></div>"; 
echo "<div class='row'><div class='block'>two</div></div>"; 
echo "<div class='row'><div class='block'>three</div></div>"; 
echo "<div class='row'><div class='block'>four</div></div>"; 

?> 
+2

* facedesk * - 你爲什麼要呼應HTML?只需輸出它! –

回答

2

當任何具有類「行」的元素被徘徊時,您的代碼將顯示所有帶有「塊」類的元素。您需要選擇正確的.block元素:

$(function() { 
    $('.block').hide(); 
    $('.row').hover(function() { 
     $(this).find('.block').show(); 
    }); 
}); 

它使用.find方法來發現,選擇.block匹配所選元素的後裔。

我不知道你打算當鼠標離開.row元素,但目前什麼也不會發生(事實上,同樣的.show線將再次運行,因爲那時只有一個參數傳遞會發生什麼變化發生什麼到.hover)。另外

$(function() { 
    $('.block').hide(); 
    $('.row').hover(function() { 
     $(this).find('.block').show(); 
    }, function() { 
     $(this).find('.block').hide(); 
    }); 
}); 

,你可以用一個參數貼,並使用.toggle方法代替::如果您打算在.block元素被再次隱藏,您可以提供另一種說法來.hover

$(function() { 
    $('.block').hide(); 
    $('.row').hover(function() { 
     $(this).find('.block').toggle(); 
    }); 
}); 
+0

我試過了,並顯示所有的divs。它應該只在懸停時顯示?我檢查了螢火蟲,它說'$未定義'。 – user892134

+0

如果未定義'$',則可能是在代碼運行之前未包含jQuery,或者另一個JavaScript庫已覆蓋'$'函數。你使用其他的JS庫嗎? –

+0

謝謝忘了在我的測試頁面上添加jQuery。 – user892134

1

裏面你需要找到當前元素的後代,你做這樣的懸停功能:

$('.row').hover(function() { 
    $(this).find('.block').show(); 
}); 

this是當前元素(懸停.row元素),所以$(this)創建一個jQuery對象,所以你可以調用它的jQuery方法。

0
$('.row').hover(function(event) { 
    if (this == event.currentTarget) { 
     // run code here 
    } 
0
$('.row').hover(function() { 
    $('.block',$(this)).show(); 
}); 
0
$('.row').mouseenter(function() { 
    $('.block', this).show(); 
    $(this).siblings().find('.block').hide(); 
}); 

懸停使得一些意義在這種情況下,如果你想完全關閉塊外。這個方法允許保持最後一行打開,如果你遠離你的鼠標。

http://jsfiddle.net/7SQdu/1/

hoever,如果你想關閉每個鼠標離開時間塊:

$('.row').hover( 
    function() { 
     $('.block', this).show();  
    }, 
    function() { 
     $('.block', this).hide();   
    }); 

當然這意味着你的CSS像.block {display: none;}

0

用戶很難在隱藏元素(或非常小的元素)上執行鼠標懸停。

更改您的代碼是這樣的:

$(function() { 
    $('.block').hide(); // hide all .block elements 
    $('.row').bind('mouseover', function() { // bind a mouseover handler 
     $(this).find('.block').show(); 
    }).bind('mouseout', function() { // bind a mouseout handler 
     $(this).find('.block').hide(); 
    }); 
}); 
0

爲什麼即使使用JavaScript?爲什麼不使用CSS?(除非你真的需要支持IE 6及以下)

CSS: 
.row .block { display: none; } 
.row:hover .block { display: block; } 

HTML: 
<div class='row'><div class='block'>one</div></div> 
<div class='row'><div class='block'>two</div></div> 
<div class='row'><div class='block'>three</div></div> 
<div class='row'><div class='block'>four</div></div> 

哦,爲@Ben Everard指出,沒有必要echo