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

时间:2012-10-31 18:09:11

标签: jquery mouseover mouseout

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

当我鼠标按下按钮时,我想要显示一些默认内容。

<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将为空白。

提前感谢。

2 个答案:

答案 0 :(得分:1)

我不确定我是否理解这个问题,但这里有一些可能会有所帮助的事情:

使用类来设置样式,而不是识别。

如果你有html部分你想改变放在一个

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

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

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

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

希望这有帮助!

答案 1 :(得分: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);
    } 
});