Блог

Итак, у меня есть этот файл .scss, который правильно получает базовый стиль, но не может получить стиль для класса sudo: hover.

Вот домашняя страница.scss

 .link {
  text-decoration: underline;
  color : rgb(39,82,180);
  cursor: pointer;
  
  amp; :hover {
      color :"#002447";
  }
}
 

И вот соответствующий код в homepage.component.html

 <li><button class="link" role="link" (click)="dostuff()">Remote Support</button></li>
 

Цвет отображается правильно, как и курсор, а текст подчеркнут, как и ожидалось.
Однако цвет не меняется при наведении курсора мыши.

Как я могу изменить цвет текста при наведении курсора мыши? Я бы настоятельно предпочел решение sass решению js / angular.

Я также попробовал более традиционный подход CSS, который также не сработал.

 .link  {
  text-decoration: underline;
  color : rgb(39,82,180);
  cursor: pointer;
}

.link :hover {
  color :"#002447";
}
 

Мы видим, что класс sudo при наведении курсора отсутствует.

Но мы видим, что другие стили корректно отображаются в консоли разработчика Chrome

Я также попытался удалить пробел между:hover и amp; , я также попытался удалить тот же пробел в версии CSS.

В моем package-lock.json у меня есть эти конкретные версии SASS.

«sass»: «1.23.3»,

«sass-loader»: «8.0.0»,

Я также использую foundaton.css и font-awesome на случай возникновения каких-либо известных конфликтов.

Между и не требуется пробел amp; :hover . Оставляя это там, компилируется в css, который выглядит следующим образом:

 .link :hover {
//...
}
 

Это, очевидно, неверно. Вместо этого мы хотели бы, чтобы скомпилированный css выглядел так:

 .link:hover {
  //...
}
 

Вместо этого сделайте:

 .link {
  text-decoration: underline;
  color : rgb(39,82,180);
  cursor: pointer;
  
  amp;:hover {
      color : #002447;
  }
}
 

Редактировать: В качестве общего совета и чего-то, что мне помогает, если мне интересно, как что-то в SCSS компилируется в CSS, я иду попробовать SCSS в Codepen и проверить, что он компилирует.

Редактирование 2: удалены кавычки вокруг шестнадцатеричного кода. Смотрите этот codepen