尝试使用CSS、jQuery和HTML的组合来创建可重复的mouseenter/mouseleave函数

我的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>

请看这里

---

我想做的是重复这些红色和蓝色的CSS类作为背景，最好是相对于用户屏幕。我可以通过简单地粘贴更多的代码来一遍又一遍地重复这些类，但这似乎不是特别有效，而且只能达到绝对值。当CSS不是图像背景（即背景重复元素）时，是否有任何方法可以重复CSS？

您可以使用javascript动态添加“斑点”div。这是主要思想：

• 你可以得到屏幕的宽度和高度
• 你可以用一个点的宽度和高度来划分它们
• 在高度上循环观察点的数量
• 在这个循环中，你可以用宽度上的点数再次循环

也许用这个

以下是循环：

// spots are 30x30 squares
// how much can we put in height ? 
number_h = parseInt(window_h / 30);
// in width
number_w = parseInt(window_w / 30);

for(var h_it = 0; h_it < number_h; h_it++)
{
    for(var w_it = 0; w_it < number_w; w_it++)
    {
        // to make one blue, one red, one blue... 
        // and change the order the next line
        if(w_it%2 === h_it%2) {
            $('<div class="display"><div class="bluespot"></div></div>')
                .appendTo('#container');
        } else {
            $('<div class="display"><div class="redspot"></div></div>')
                .appendTo('#container');
        }
    }
}

//斑点是30x30正方形
//我们能在高度上加多少？
数字=parseInt（窗口=30）；
//宽度
数字=parseInt（窗口w/30）；
for（var h_it=0；h_it

当然，这可能并不完美，但至少你有了这个想法

这是一个更复杂的摆弄中心容器和刷新窗口大小事件：

---

你能做的就是用javascript动态添加你的“spot”div。这是主要思想：

• 你可以得到屏幕的宽度和高度
• 你可以用一个点的宽度和高度来划分它们
• 在高度上循环观察点的数量
• 在这个循环中，你可以用宽度上的点数再次循环

也许用这个

以下是循环：

// spots are 30x30 squares
// how much can we put in height ? 
number_h = parseInt(window_h / 30);
// in width
number_w = parseInt(window_w / 30);

for(var h_it = 0; h_it < number_h; h_it++)
{
    for(var w_it = 0; w_it < number_w; w_it++)
    {
        // to make one blue, one red, one blue... 
        // and change the order the next line
        if(w_it%2 === h_it%2) {
            $('<div class="display"><div class="bluespot"></div></div>')
                .appendTo('#container');
        } else {
            $('<div class="display"><div class="redspot"></div></div>')
                .appendTo('#container');
        }
    }
}

//斑点是30x30正方形
//我们能在高度上加多少？
数字=parseInt（窗口=30）；
//宽度
数字=parseInt（窗口w/30）；
for（var h_it=0；h_it

当然，这可能并不完美，但至少你有了这个想法

这是一个更复杂的摆弄中心容器和刷新窗口大小事件：

---

我已经想出了一个使用克隆的方法，我也在推特上发布了这个方法（在这里：-编辑：必须输入代码…）

$（文档）.ready（函数（）{
var numberOfClones=7；
变量el=$（'.display'）；
对于（i=0；i

---

但是Brewal的解决方案效果很好，在大多数情况下效果会更好。

好吧，我已经想出了一种使用克隆的方法，我在Twitter上也提到了这个方法（这里是：-编辑：必须输入代码…）

$（文档）.ready（函数（）{
var numberOfClones=7；
变量el=$（'.display'）；
对于（i=0；i

---

但是Brewal的解决方案效果很好，在大多数情况下效果会更好。

你想要的是用javascript重复你的html，不是吗？如果没有CSS替代方案（我猜没有）的话，那就差不多了。我的Facebook上有人建议使用PHP？确实没有CSS替代方案。PHP不是一个好的选择，因为它与用户的屏幕宽度和高度无关。我会给你一些建议作为答案。这些答案中有任何一个解决了你的问题吗？你想要的是用javascript重复html，不是吗？如果没有CSS，几乎可以Alternative（我猜没有）。我的Facebook上有人建议使用PHP？事实上，没有CSS可供选择。PHP不是一个好的选择，因为它与用户的屏幕宽度和高度无关。我会给你一些建议作为答案。这些答案解决了你的问题吗？太好了，谢谢！我会分析这些代码，确保我理解d它。真的很感激，谢谢。太好了，谢谢！我要分析那段代码，确保我理解它。真的很感激，谢谢。你可以在这里查看它。我仔细查看了你的代码，它是有意义的，但我会自己重新编写，以便正确理解它。你可以检查它在这里的行动有一个很好的看你的代码，这是有意义的，但我会重新编写它自己，以期正确地理解它。