Блог

Главная - Вопросы по программированию - ASP.net Ошибка CSS при наведении курсора мыши на кнопку

ASP.net Ошибка CSS при наведении курсора мыши на кнопку

#html #css #asp.net

#HTML #css #asp.net

Вопрос:

У меня есть эта кнопка <button type="submit" id="wow">
<i class="fa fa-lock"></i> Log In
</button>

Я пытаюсь ввести значок Font Awesome на кнопке входа в систему. код CSS таков:

 #wow{
    padding-top:10px;
    background-color:red;
    border:none;
    float: left;

    color:#333333;
    width: 120px;
    height:120px;
}

и для: наведите курсор только на это

   #wow :hover {
        background-color: green;

    }

Это кнопка в нормальном состоянии.
изображение 1

это наведение на кнопку. изображение 2

он изменяет только фон значка…

есть предложения по исправлению этого?

Комментарии:

1. удалите пробел между #wow:hover

Ответ №1:

Вам нужно убрать пробел между #wow и :hover . В настоящее время ваше наведение будет применено к потомкам кнопок

 #wow {
  padding-top: 10px;
  background-color: red;
  border: none;
  float: left;
  color: #333333;
  width: 120px;
  height: 120px;
}
#wow:hover {
  background-color: green;
}  
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<button type="submit" id="wow">
  <i class="fa fa-lock"></i> Log In
</button>