Применение действия jQuery к определенному элементу управления

Question

У меня есть много динамически размещенных элементов управления на странице, в основном текстовые поля, которые имеют класс «dynamic_control». Когда я перемещаю мышь над каждым текстовым полем, я хочу, чтобы только конкретное текстовое поле имело красную границу. Но сейчас все текстовые поля с классом «dynamic_control» становятся красными. Я знаю, это ошибка пользователя ...

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

Да, я понимаю, что он работает точно так же, как я сказал ему работать. lol ....

НО, как я могу изменить границу цвета для ТОЛЬКО этого конкретного элемента управления. Имейте в виду, что все эти текстовые поля/элементы управления расположены динамически. Благодаря!

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

Если вам нужно сделать что-то еще с наведен элементом, правильный синтаксис будет выглядеть следующим образом:

$(".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/