Как применить стили?

104

11 марта 2021, 08:20

есть такой js

$("#input-name").mouseover(function () {
 $('#input-name').attr('placeholder','Текст');
});
$("#input-name").mouseout(function() {
 $('#input-name').attr('placeholder','Имя');
});

при mouseover мне нужно изменить стиль плейсхолдера, можно ли это как то сделать?

Answer 1

Рекомендуемый способ: прописать заранее заданный стиль в css и потом добавлять или удалять этот класс (или что вы пропишите) в элемент:

$("#input-name").mouseover(function () { 
    $('#input-name').attr('placeholder','Текст').addClass('hover'); 
}); 
 
$("#input-name").mouseout(function() { 
    $('#input-name').attr('placeholder','Имя').removeClass('hover'); 
});

#input-name.hover { 
  border:  1px solid red; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input type="text" id="input-name" />

Answer 2

для начала приведем наши функции в порядок mouseover и mouseout, для того что бы достучаться до элемента из функций и добавим аргумент e function ( e ) и сохраняем наш элемент в переменную JQueryEvent

JQueryEvent = e.target;

далее в JQuery есть такое понятие как цепочки вызова функций .mouseover().mouseout() вот итог

$("#input-name")
        .mouseover( function ( e ) {
            JQueryEvent = e.target;
            $(JQueryEvent)
              .attr('placeholder','Текст')
              .css({borderColor: 'red'})
        })
        .mouseout( function ( e ) {
            JQueryEvent = e.target;
            $(JQueryEvent)
                .attr('placeholder','Имя')
                .css({borderColor: ''})
        });

а так же с помощью добавления классов ( рекомендуемый вариант )

$("#input-name") 
 
                .mouseover( function ( e ) { 
 
                    JQueryEvent = e.target; 
                    $(JQueryEvent).attr('placeholder','Текст') 
                        .addClass('active') 
 
                }) 
 
                .mouseout( function( e ) { 
 
                    JQueryEvent = e.target; 
                    $(JQueryEvent).attr('placeholder','Имя') 
                        .removeClass('active') 
 
                });

#input-name.active { 
       border-color: red !important; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>stack</title> 
</head> 
<body> 
<label> 
    <input type="text" id="input-name"> 
</label> 
 
<script> 
</script> 
</body> 
</html>