Question

如果鼠标指针越过div，我想在div和div bg颜色下改变两个锚标签的样式。所以我刚刚通过jQuery，现在工作正常。但是当我添加相同的div作为复制然后我有另一个问题，鼠标在效果发生在其他元素也是，因为类名是相同的，我知道这是因为haapening这样的原因。我必须保持该类名必须相同。所以请教我如何解决这个问题，但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

由于瓦赫德

Answer 1

在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");
});

演示：Fiddle

鼠标悬停效果在所有元素中同时发生

1 个答案: