Мышь над эффектами, происходящими одновременно во всех элементах

Question

Мышь над эффектами, происходящими одновременно во всех элементах

0

Если указатель мыши над div, который я хочу изменить стиль двух якорных тегов под цветом div и div bg. Так что я просто сделал через jQuery, теперь это работает нормально. Но когда я добавил тот же div, что и дублирование, тогда у меня есть другая проблема, мышь над эффектами происходит в то время, когда другие элементы тоже, потому что имя класса одно и то же, я знаю, что это причина, так называемая хапа. Я должен держать это имя класса одинаковым. поэтому, пожалуйста, научите меня, как я могу это исправить, но jQuery.

Посмотрите следующий jQuery, который я использовал, и вы также можете увидеть демо.

$(document).ready(function () {

            $(".custombox").bind({
                mouseover: function () {

                    $(".custombox").addClass("custombox' + num++ + '");
                    $(".custombox a").css("color", "#fff");
                    $(".deletebtn").css("background-position", "bottom");
                },
                mouseout: function () {
                    $(".custombox a").css("color", "#333");
                    $(".deletebtn").css("background-position", "top");
                }
            });

            $(window).load(function () {
                var coordinates = function (element) {
                    element = $(element);
                    var top = element.position().top;
                    var left = element.position().left;
                    $('#results').text('X: ' + left + ' ' + '   Y: ' + top);
                }

                $('#custombox').draggable({ containment: "#containment-wrapper", scroll: false,
                    start: function () {
                        coordinates('#custombox');
                    },
                    stop: function () {
                        coordinates('#custombox');
                    }

                });

                $('#custombox2').draggable({ containment: "#containment-wrapper", scroll: false,
                    start: function () {
                        coordinates('#custombox2');
                    },
                    stop: function () {
                        coordinates('#custombox2');
                    }

                });
                $("#custombox2").resizable({ containment: "#containment-wrapper", scroll: false, maxHeight: 250, maxWidth: 350, minHeight: 50, minWidth: 50 });

            }); //]]>  

        });

DEMO

Спасибо Vahid

VahidRockv 02 дек. 2013, в 11:23

Источник

0

Вам не нужно иметь $ (window) .load () внутри $ (document) .ready (). Чтобы решить вашу проблему, я бы посмотрел на использование ключевого слова this в обратном вызове.
Stuart Miller 02 дек. 2013, в 10:07

Теги:

jquery

html

css

1 ответ

Ещё вопросы

Вам не нужно иметь $ (window) .load () внутри $ (document) .ready (). Чтобы решить вашу проблему, я бы посмотрел на использование ключевого слова this в обратном вызове.

Arun P Johny · Accepted Answer · 2013-12-02T07-22-00.000Z

В обработчиках mouseover и mouseout вам необходимо настроить таргетинг на соответствующий элемент coustombox. Внутри обработчиков событий this относится к текущему элементу, поэтому измените свой сценарий на

$(".custombox").hover(function () {
    $(this).addClass("custombox' + num++ + '");
    $(this).find("a").css("color", "#fff");
    $(this).find(".deletebtn").css("background-position", "bottom");
}, function () {
    $(this).find("a").css("color", "#333");
    $(this).find(".deletebtn").css("background-position", "top");
});

Демо: скрипка

Спасибо, Арун П. Джонни, за отличный ответ!