0

我有多个名为 image-wrap 的 div，当我将鼠标悬停在其中一个上时，我想显示该特定 image-wrap 内的元素，在这种情况下，名为 item 的 p 标签内的链接和图像（而不是显示所有其中）。我在网上搜索过，我发现的大多数答案都说使用 $(this)。我不想影响图像换行，所以 $(this) 不起作用。

的HTML：

<div class="image-wrap">
<p class="item"><span><a href="#">Link</a><img src=" "></span></p>
</div>

<div class="image-wrap">
<p class="item"><span><a href="#">Link</a><img src=" "></span></p>
</div>

<div class="image-wrap">
<p class="item"><span><a href="#">Link</a><img src=" "></span></p>
</div>

jQuery：

<script>
$('.image-wrap').hover( 
function() {
$('.item').css('display','block');
},
function() {
$('.item').css('display','none');
});
</script>
4

4 回答 4

2

解决这个特殊问题的最好方法是使用 CSS，而不是 javascript。请考虑以下 CSS：

.image-wrap .item {
  display: none;
}

.image-wrap:hover .item {
  display: block;
}
于 2013-04-26T05:09:02.247 回答
1

利用

$('.image-wrap').hover( 
function() {
$('.item',this).css('display','block');
},
function() {
$('.item',this).css('display','none');
});

它会.item在特定的.image-wrap

于 2013-04-26T05:05:41.520 回答
0

你可以做这样的事情。

$('.image-wrap').hover( 
function() {
  $(this).children('.item').css('display','block');
},
function() {
  $(this).children('.item').css('display','none');
});

或者

$('.image-wrap').hover( 
function() {
  $(this).children('.item').show();
},
function() {
  $(this).children('.item').hide();
});
于 2013-04-26T05:08:17.653 回答
0

“我不想影响图像换行，所以 $(this) 不起作用。”

您确实需要使用$(this)- 想法是从 DOM 遍历方法开始$(this)并使用 DOM遍历方法来选择相关元素。在你的情况下$(this).children()应该做的伎俩，或者$(this).find('.item')：

$('.image-wrap').hover( 
function() {
   $(this).children().show();
},
function() {
   $(this).children().hide();
});

当 jQuery 提供.show()和.hide().

演示：http: //jsfiddle.net/KsqaW/

（请注意，您的 div 中需要其他未隐藏的内容，或者没有可以悬停的内容。）

于 2013-04-26T05:13:24.613 回答