javascript - 将 jQuery 操作应用于特定控件

Question

我在页面上有许多动态放置的控件，主要是文本框，它们具有“dynamic_control”类。当我将鼠标移到每个文本框上时，我只希望该特定文本框具有红色边框。但是，现在，所有具有“dynamic_control”类的文本框都变成红色。我知道，这是一个用户错误...

    $(".dynamic_control").mouseover(function() {
    $(".dynamic_control").css("border-color", "red");
})

是的，我意识到它的工作方式与我告诉它的工作方式完全一样。哈哈....

但是，我如何才能仅更改该特定控件的边框颜色。请记住，所有这些文本框/控件都是动态放置的。谢谢!

Answer 1

您希望当鼠标位于其上(悬停)时有一个红色边框，对吗？使用 css hover 伪类，如下所示:

.dynamic_control:hover
{
    border-color: red;
}

如果你不需要CSS，请使用jQuery hover而不是鼠标悬停。使用 mouseover 您可以设置红色边框，但当鼠标不在其上时，您不会将其删除；这就是为什么所有盒子都变成红色的原因。您需要重置边框颜色。

$(".dynamic_control").hover(
    // on mouse over
    function(){
        $(this).css('border-color', 'red');
    },
    // on mouse out
    function(){
        $(this).css('border-color', 'gray');
    }
);