Jquery, изменение цвета при наведении

ProgramBox

Jquery, изменение цвета при наведении

Post author:admin
Запись опубликована:7 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Какое-то время это сводило меня с ума, я не могу понять, что я делаю не так. Я пытаюсь создать сетку 4×4 и изменить цвет каждого квадрата при наведении курсора мыши (цвет остается после того, как мышь уйдет), но часть с изменением цвета не работает. Вот что у меня есть до сих пор:

Изменение цвета при наведении:

Это та часть, где я застрял

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

Ответ №1:

Вы можете удалить свой код jquery для добавления класса hover и просто внести это изменение css в файл

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

просто устраняет вашу проблему в чистом Css.

Добавление JsFiddle для этого http://jsfiddle.net/jjeswin/nb3dB/1 /

1. 1 IMO, это должен быть правильный ответ, поскольку он решает проблему наилучшим образом, хотя OP использует jQuery для выполнения того же.

2. @ limelights — но он хочет получить ответ в jquery, а не в css

3. @sudharsan Нет, OP хочет получить правильный ответ и решение своей проблемы — в настоящее время он использует jQuery, чтобы попытаться это исправить.

4. спасибо, но я хочу, чтобы цвет оставался включенным даже после того, как я закончил наведение курсора мыши на квадрат. Насколько мне известно, в css нет .selector:unhover

Ответ №2:

Вам нужно сначала вызвать makeGrid(4); , а затем связать событие.

также для удаления класса вам необходимо изменить функцию наведения, чтобы использовать mouseenter и mouseleave функционировать:

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

Рабочая демонстрация

Обновление: для сохранения цвета даже после mouseleave:

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

Демонстрация только с помощью mouseenter

1. делегирование событий лучше, чем последовательность вызова функции, а затем привязка события

2. Я согласен с этим … но он рендерит небольшой статический html без каких-либо вызовов службы. таким образом, гарантируется, что dom отображается до того, как метод наведения привязывает событие. тогда зачем усложнять функциональность с помощью делегирования.

Ответ №3:

Я обновил код скрипки 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 {
    background-color: red;
}

Ответ №4:

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

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

Используйте делегирование событий для динамически создаваемых элементов.

ДЕМОНСТРАЦИЯ:

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

Ответ №5:

Используется event delegation для динамического добавления элементов dom . это лучший способ сделать

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

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

    }); */

ДЕМОНСТРАЦИЯ

Ответ №6:

вот так: 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');
    });



});

Ответ №7:

Есть ли конкретная причина, по которой вы не используете CSS для этого?

 .square:hover { color: #superAwesome }

Если вы хотите, чтобы цвет анимировался (и задерживался при наведении курсора мыши), вы можете использовать CSS3 transition:

 .square { transition: color 1s; }

Ответ №8:

Попробуйте это

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

Ответ №9:

Поскольку ваши поля создаются динамически для DOM, событие наведения не будет доступно для этих полей. В этом случае делегирование события поможет вам прикрепить это событие

Попробуйте это

ОП сказал the color stays after the mouse leaves

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

Ответ №10:

Используйте .toggleClass() :

 makeGrid(4);

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