0

だから私はここの別の投稿でこのスクリプトを見つけて、私のスタイル/サイトに合うように変更しましたが、1 div でしか機能しません。同じページの複数の div で使用したいのですが、div を複製するとそのうちの 1 つだけが機能します。すべての div に同じ名前が付けられているため、機能する必要がありますか、それとも各 div に異なる名前を付ける必要がありますか? コーディングを行って編集することなく、投稿からプルして自動表示するように設定しているため、不要な場合はすべてのコーディングを追加する必要がないようにしています。

これは私が現在使用しているコーディングです。左側のものは機能しますが、私が広告を追加したものは、カーソルを合わせると機能しません。

HTML

<div id="client" style="float:left;">
<div id="client_slider">
    <p>content...</p>
</div>
</div>

<div id="client" style="float:left;">
<div id="client_slider">
    <p>content...</p>
</div>
</div>

CSS

#client {
position: relative;
overflow:hidden;
background-color:#ffff00;
width: 320px;
height: 320px;
}
#client_slider {
width: 320px;
height: 320px;
bottom: -320px;
right: 0px;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
color:#fff;
}

脚本

$(function () {
$('#client').on("mouseenter", function () {
    $("#client_slider").animate({
        "bottom": "-240px"
    }, "slow");
}).on("mouseleave", function () {
    $("#client_slider").animate({
        "bottom": "-320px"
    }, "fast");
});
});

サンプルリンク

http://jsfiddle.net/4yhKP/

4

6 に答える 6

1

classの代わりに使用しidます。

ID は一意である必要があります

フィドルデモ

$(function () {
    $('.client').on("mouseenter", function () {
        $(".client_slider").animate({
            "bottom": "-240px"
        }, "slow");
    }).on("mouseleave", function () {
        $(".client_slider").animate({
            "bottom": "-320px"
        }, "fast");
    });
});

同じ id 属性を持つ 2 つの HTML 要素を読む: 本当に悪いのか?

于 2013-10-31T05:13:48.663 に答える
0

問題は、id で mouseenter 関数を呼び出していることです。このコードを呼び出し関数に置き換えると、機能します。id:clients をクラスに変更すると思います。

  $(function () {
        $('div').on("mouseenter", function () {
            $(this).children('div').animate({
                "bottom": "-240px"
            }, "slow");
        }).on("mouseleave", function () {
           $(this).find('div').animate({
                "bottom": "-320px"
            }, "fast");
        });
    });
于 2013-10-31T05:19:14.470 に答える
0

ワーキングデモ

要素には一意の id 属性のみを設定できます。

html

<div class="client" style="float:left;">
    <div class="client_slider">
        <p>content...</p>
    </div>
</div>

<div class="client" style="float:left;">
    <div class="client_slider">
        <p>content...</p>
    </div>
</div>

CSS

.client {
    position: relative;
    overflow:hidden;
    background-color:#ffff00;
    width: 320px;
    height: 320px;
}
.client_slider {
    width: 320px;
    height: 320px;
    bottom: -320px;
    right: 0px;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    color:#fff;
}

コード

$(function () {
    $('.client').on("mouseenter", function () {
        $(this).find(".client_slider").animate({
            "bottom": "-240px"
        }, "slow");
    }).on("mouseleave", function () {
        $(this).find(".client_slider").animate({
            "bottom": "-320px"
        }, "fast");
    });
});

これが役に立てば幸いです、ありがとう

于 2013-10-31T05:13:55.953 に答える
0

クラスではなくIDに付けられます。

代わりにクラスに切り替えると、正常に機能します。

于 2013-10-31T05:14:25.260 に答える