javascript - Jquery, changing color on hover - Stack Overflow

admin管理员组

文章数量:1292475

This has been driving me crazy for a while, I cannot figure out what I am doing wrong. I am trying to make a 4x4 grid and change the color of each square when I hover my mouse over (the color stays after the mouse leaves) but the changing color part is not working. Here is what I have so far:

Changing color on hover:

This is the part where I am stuck

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

This has been driving me crazy for a while, I cannot figure out what I am doing wrong. I am trying to make a 4x4 grid and change the color of each square when I hover my mouse over (the color stays after the mouse leaves) but the changing color part is not working. Here is what I have so far:

Changing color on hover:

This is the part where I am stuck

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

• javascript
• jquery
• html
• css

Share Follow edited Jun 24, 2014 at 6:20 Henrik Andersson 47.2k1616 gold badges100100 silver badges9494 bronze badges asked Jun 24, 2014 at 6:09 candyhunterzcandyhunterz 4522 silver badges77 bronze badges 1

• 1 thank you for your responses everyone, I will keep in mind event delegation the next time I fill the DOM dynamically. – candyhunterz Commented Jun 24, 2014 at 6:29

Add a ment  | 

10 Answers 10

Sorted by: Reset to default 5

You can remove your jquery code for adding class hover and just make this css change in the file

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

simply fixes your problem in pure Css.

Adding JsFiddle for this http://jsfiddle/jjeswin/nb3dB/1/

You need to first call makeGrid(4); and then bind the event.

also to remove class you need to modify hover function to use mouseenter and mouseleave function:

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

Working Demo

Update: for keeping the color even after mouseleave:

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

Demo with only mouseenter

I have updated the fiddle code http://jsfiddle/ZfKM8/5/

In your javascript, i've removed the hover function.

$(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);
});

in your css, instead of .hover change it to .square:hover

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

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

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

Use event delegation for dynamically created elements.

Demo:

http://jsfiddle/m6Bnz/1/

Use event delegation for added dom elements dynamically . it is the best way to do

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

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

    }); */

DEMO

here you go: http://jsfiddle/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');
    });



});

Is there a specific reason why you're not using CSS for this?

.square:hover { color: #superAwesome }

If you want the color to animate (and delay when mousing out) you can use CSS3 transition:

.square { transition: color 1s; }

Try this

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

Since your boxes created dynamically to the DOM, the hover event will not be available for these boxes. In this case, event delegation will help you to attach that event

Try this

OP said the color stays after the mouse leaves

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

Make use of .toggleClass():

makeGrid(4);

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

本文标签： JavaScriptJQuerychanging color on hoverStack Overflow