我有一系列项目:
每个项目的结构如下:
<div class="span3 item">
<img class="itemImage" src="assets/img/bure.jpg">
<div class="itemDescription">
<p><span class="itemDescLabel">Title:</span> <script>document.write(title);</script></p>
<p><span class="itemDescLabel">Price:</span> <script>document.write(price);</script></p>
<p><span class="itemDescLabel">Source:</span> <script>document.write(source);</script></p>
</div><!-- /itemDescription-->
</div> <!-- /item-->
这个想法是,当我将鼠标悬停在一个上时,应该显示它的描述。
当前发生的情况是,当我将鼠标悬停在一个上时,会显示所有项目的描述。
发生这种情况是因为我正在像这样应用悬停:
$(document).ready(function() {
$('.item').hover(
function() {
$('.itemDescription').show();
},
function() {
$('.itemDescription').hide();
});//end hover
});//end ready
我试过这样做:
$(document).ready(function() {
$('.item').hover(
function() {
$(this).next('.itemDescription').show();
},
function() {
$(this).next('.itemDescription').hide();
});//end hover
});//end ready
还有这个:
$(document).ready(function() {
$('.item').each(function() {
$(this).hover(
function() {
$(this).next('.itemDescription').show();
},
function() {
$(this).next('.itemDescription').hide();
});//end hover
});//end each
});//end ready
两种方法都没有奏效。
我究竟做错了什么?我知道我可以给每个项目一个不同的 ID,但应该有一个更简单的方法来做到这一点......
谢谢。