Question

我需要在我的jquery中添加一个这个标记，当我将鼠标悬停在我的图像上时，它一次只能显示一个而不是全部

谢谢

$(function() {
$('.slide').hover(function() {
    $('#show-me-here span').show();
}, function() {
    $('#show-me-here span').hide();
});
});

Answer 1

我不确定我是否理解正确，但我认为你想要在鼠标悬停在图像上时显示某些内容，并在不显示时隐藏。如果是这样，请使用

$(function() {
    $('.slide').hover(function() {
        $('.common_class_of_things_you_want_to_hide_on_mouse_over').hide();
        $('.only_things_you_want_to_show_on_mouse_over').show();
    }, function() {
        $('.common_class_of_things_you_want_to_show_on_mouse_out').show();
        $('.only_things_you_want_to_hide_on_mouse_over').hide();
    });
});

编辑：因为你有多个带有id的show-me，它不会工作，因为ID必须是唯一的，而不是使用类

Answer 2

所以我把你的代码放在fiddle中，它可以运行：

HTML

<button class="slide">text</button>

<div id="show-me-here">
<span>
    show me here
    </span>
</div>

JS（无变化）

$(function() {
$('.slide').hover(function() {
    $('#show-me-here span').show();
}, function() {
    $('#show-me-here span').hide();
});
});

CSS

#show-me-here span
{
    display:none;
}

Answer 3

你现在正在做的是 矫枉过正！

这根本不需要javascript，使用简单的CSS。

.show-username{
   display: none;
}

.slide:hover .show-username{
   display: block; // or inline, inline-block, etc.
}

Answer 4

我想我已经设法做到了

$(".slide").hover(function () {
    $(this).find(".show-username").show();
}, function () {
    $(this).find(".show-username").hide();
})

如何在jquery中添加此标记

4 个答案:

HTML

JS（无变化）

CSS