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。使用mouseover设置红色边框，但是当鼠标不在时，您不会将其删除;这就是为什么所有的盒子都变红了。您需要重置border-color。

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

Answer 2

如果您确实需要对hovered元素执行其他操作，则正确的语法如下：

$(".dynamic_control").mouseover(function() {
    // Reset the border color of all '.dynamic_control' elements
    $(".dynamic_control").css("border-color", "initial");

    // Make only the hovered element's border-color red
    $(this).css("border-color", "red");
});

我正在使用您的问题作为示例，但请使用mshsayem的CSS解决方案，这对您的案例来说是最适合的。

Answer 3

:hover适用于样式设计。如果您想将任何其他Javascript操作附加到鼠标悬停，您可以根据您的示例解决触发事件的单个元素，如此小提琴中所示：

https://jsfiddle.net/jacobsee/qnun9sr2/

将jQuery操作应用于特定控件

3 个答案: