1

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

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

<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 之一中的按钮时，它只会删除内容或将内容添加到父级容器中。

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

提前致谢。

4

2 回答 2

1

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

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

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

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

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

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

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

希望这可以帮助！

于 2012-10-31T18:19:06.577 回答
0 
$(".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);
    } 
});
于 2012-10-31T18:21:29.680 回答