1

私のjQuery：

$(document).ready(function() {
    $('.display').mouseenter(function() {
         $(this).fadeTo('fast',0);
    });
    $('.display').mouseleave(function() {
         $(this).fadeTo('fast',1);
    });
});

私のCSS：

div {
    display:inline-block;
}

.display {
    padding:10px;
}

.bluespot {
    height:10px;
    width:10px;
    border-radius:100%;
    background-color:blue;
}

.redspot {
    height:10px;
    width:10px;
    border-radius:100%;
    background-color:red;
}

私のHTML：

<div>
    <div class='display'><div class='bluespot'></div></div>
    <div class='display'><div class='redspot'></div></div>
</div>

こちらをご覧くださいhttp://jsfiddle.net/andrewtanner/ZyEKz/1/

私がやりたいことは、これらの赤と青の CSS クラスを背景として、できればユーザーの画面に対して相対的に繰り返すことです。コードを貼り付けるだけでクラスを何度も繰り返すことができますが、それは特に効率的ではないようで、絶対値になるだけです。画像の背景、つまり background-repeat 要素でない場合に CSS を繰り返す方法はありますか?

4

2 に答える 2

0

まあ、私はTwitterでも発砲していたクローンを使用する方法を思いつきました（これはここにあります：http: //jsfiddle.net/bmgh1985/LfHC8-編集：コードを配置する必要があります...）

$(document).ready(function () {
    var numberOfClones = 7;
    var el = $('.display');
    for (i = 0; i < numberOfClones; i++) {
        var newEl = el.clone();
        $('.display').append(newEl);

}

しかし、Brewal のソリューションはうまく機能し、ほとんどの場合はより適切に機能します。

于 2013-07-11T20:11:55.547 に答える