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 one のボタンに移動すると、コンテンツが削除されるか、親の 1 つのコンテナーにコンテンツが追加されます。

また、マウスアウト時にデフォルトのコンテンツを設定するソリューションも必要です。そうしないと、コンテンツ 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>

または、'visibility' を 'visible' に設定して、コンテンツを再度表示することもできます。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 に答える