jquery鼠标悬停和多个内容和按钮上的鼠标悬停

尝试了很多东西，但都没能成功。当用户将鼠标移到第一个按钮上时，将显示第一个内容。我的代码现在可以工作了，但当我按下按钮时，页面中的所有内容都消失了

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

<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();});

$（“.button”）.mouseover（函数（）{
$（“.content container”）.eq（取决于父编号）。追加（“+value+”）；
}).mouseout（函数（）{$（“.content”）.remove（）；}）；

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

我还需要一个解决方案，在鼠标移出时设置默认内容，否则content div将为空

---

提前谢谢。

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

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

如果您有要更改的html部分，请将其放入

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

。某些内容。。。

现在假设您有一个按钮，并且希望删除内容：

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

清除

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

---

希望这有帮助

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

$(".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);
    } 
});

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

如果您有要更改的html部分，请将其放入

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

。某些内容。。。

现在假设您有一个按钮，并且希望删除内容：

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

清除

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

希望这有帮助

$（“.button”）。打开({
$(".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);
    } 
});

mouseenter:function（）{
var content=$（''，{text:this.value，'class'：'content'}）；
$（this）.sides（'.content container'）.html（content）；
},
mouseleave:function（）{
var default=$（''，{text:'Hello Kitty'}）；
$（this）.sides（'.content container'）.html（默认值）；
} 
});
$（“.button”）。打开({
mouseenter:function（）{
var content=$（''，{text:this.value，'class'：'content'}）；
$（this）.sides（'.content container'）.html（content）；
},
mouseleave:function（）{
var default=$（''，{text:'Hello Kitty'}）；
$（this）.sides（'.content container'）.html（默认值）；
} 
});
鼠标移出后需要什么效果？只需将内容替换为“默认内容”。当鼠标滑过时，它会根据它所涉及的按钮显示内容。鼠标滑过后你想要什么效果？只想将内容替换为“默认内容”。当mouseover时，它会根据相关的按钮显示内容。我想我的问题不在于mouseover和mouseout，我只是希望.remove（）函数只删除其父级中的内容，而不是从整个页面中删除内容。这应该正好做到这一点？我想我的问题不在于mouseover和mouseout，我只希望.remove（）函数只删除其父级中的内容，而不是从整个页面中删除内容。这应该可以做到吗？