jquery mouseover 和 mouseout 在多个内容和按钮上

Question

尝试了很多东西，但无法让它发挥作用。当用户将鼠标悬停在第一个按钮上时，将显示第一个内容。我的代码现在正在运行，但是当我将鼠标移出按钮时，页面中的所有内容都消失了。

当我将鼠标移出按钮时，我希望显示一些默认内容。

<div class="parent">
    <div class="button"></div>
    <div class="button"></div>
    <div class="content-container">
        <div class="content"></div>
    </div>
</div>
<div class="parent">
    <div class="button"></div>
    <div class="button"></div>
    <div class="content-container">
        <div class="content"></div>
    </div>
</div>

我的 javascript

$(".button").mouseover(function(){      
    $(".content-container").eq(depends on parent number).append("<div class='content'>" + value + '</div>');
}).mouseout(function(){$(".content").remove();});

让我的问题清楚。 当用户鼠标事件到.parent one中的按钮时，它只会删除内容或将内容添加到父级容器中。

我还需要一个解决方案来设置鼠标悬停时的默认内容，否则内容 div 将是空白的。

提前致谢。

Answer 1

我不确定我是否理解这个问题，但以下几点可能会有所帮助：

使用类进行样式设置，而不是识别。

如果您有要更改的 html 部分，请放在

<div id="my_default_content">..some content...</div>

现在假设你有一个按钮并且你想删除内容：

<button onclick="function() {$('#my_default_content').css('visibility', 'none')}">Clear</button>

或者您可以通过将“可见性”设置为“可见”来使内容再次可见。如果您希望 div 不占用空间，请将 'display' 设置为 'none'。

希望这会有所帮助！

Answer 2

$(".button").on({
    mouseenter: function() {
        var content = $('<div />', {text: this.value, 'class': 'content'});
        $(this).siblings('.content-container').html(content);
    },
    mouseleave: function() {
        var default = $('<div />', {text: 'Hello Kitty'});
        $(this).siblings('.content-container').html(default);
    } 
});