Question

这让我疯狂了一段时间，我无法弄清楚我做错了什么。我正在尝试制作一个4x4网格并在我将鼠标悬停在其上时更改每个方格的颜色（鼠标离开后颜色保持不变）但是更改的颜色部分不起作用。以下是我到目前为止的情况：

这是我被困的部分

$('.square').hover(function () {
    $(this).addClass('hover');
});

Answer 1

您可以删除用于添加类悬停的jquery代码，只需在文件中进行此css更改

.square:hover {
    background-color: red;
}

只需在纯Css中解决您的问题。

为此添加JsFiddle http://jsfiddle.net/jjeswin/nb3dB/1/

Answer 2

您需要先调用makeGrid(4);，然后绑定事件。

还要移除您需要修改悬停功能的类以使用mouseenter和mouseleave函数：

makeGrid(4);
$('.square').hover(function() {
        $(this).addClass('hover');
},function() {
        $(this).removeClass('hover');
});

<强> Working Demo

更新：即使在mouseleave之后保持颜色：

 makeGrid(4);
      makeGrid(4);
 $('.square').hover(function() {
        $(this).addClass('hover');
 });

<强> Demo with only mouseenter

Answer 3

$('#container').on("mouseenter", '.square', function() {
    $(this).addClass('hover');  
});

$('#container').on("mouseleave", '.square', function() {
$(this).removeClass('hover');   
});

对动态创建的元素使用事件委托。

演示：

http://jsfiddle.net/m6Bnz/1/

Answer 4

动态使用event delegation添加dom元素。这是最好的方式

$('#container').on('mouseenter' , ".square" , function() {
    $(this).addClass('hover');

    });
/* $('#container').on('mouseleave' , ".square" , function() {
    $(this).removeClass('hover');

    }); */

DEMO

Answer 5

我更新了小提琴代码http://jsfiddle.net/ZfKM8/5/

在你的javascript中，我删除了悬停功能。

$(document).ready(function() {
    function makeGrid(n) {
        var grid = $('#container');
        for (var i = 1;i<=n; i++) {
            for (var j = 1; j <= n; j++){
                grid.append("<div class='square'></div>");
            }
            grid.append("<div class='new_row'></div>");
        }
    };  
    makeGrid(4);
});

在你的css中，而不是.hover将其更改为.square：hover

.square:hover {
    background-color: red;
}

Answer 6

由于您的框动态创建到DOM，因此悬停事件将不适用于这些框。在这种情况下，事件委派将帮助您附加该事件

试试这个

OP说the color stays after the mouse leaves

$('#container').on('mouseenter','.square',function() {
    $(this).addClass('hover');
});

Answer 7

你去：http://jsfiddle.net/ZfKM8/3/

$(document).ready(function() {



    function makeGrid(n) {
        var grid = $('#container');
        for (var i = 1;i<=n; i++) {
            for (var j = 1; j <= n; j++){
                grid.append("<div class='square'></div>");
            }
            grid.append("<div class='new_row'></div>");
        }
    };
    makeGrid(4);
    $(document).on('mouseenter','.square',function() {
        $(this).addClass('hover');
    });
    $(document).on('mouseleave','.square',function() {
        $(this).removeClass('hover');
    });



});

Answer 8

为什么你没有为此使用CSS？

.square:hover { color: #superAwesome }

如果你想让颜色动画（并在外出时延迟）你可以使用CSS3过渡：

.square { transition: color 1s; }

Answer 9

试试这个

            <html>
        <head>
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery-ui.min.js"></script>

        <style>

        .hover
        {
        background:red;
        }
        </style>


        </head>
        <body>
        <div class="square" style="width:100px;height:100px;border:1px solid"> </div>

        <script type="text/javascript">

        $('.square').hover(function() 
        {
        $(this).addClass('hover');
        });


        $('.square').mouseout(function() 
        {
        $(this).removeClass('hover');
        });
        </script>


        </body>
        </html>

Answer 10

利用.toggleClass()：

makeGrid(4);

$('.square').hover(function() {
    $(this).toggleClass('hover');   
});

Jquery，在悬停时改变颜色

10 个答案: