Я стилизовал кнопку на своем веб-сайте js и получил эту ошибку при написании для нее css, на самом деле я собирался анимировать его после наведения мыши. показывает следующие ошибки
1.двоеточие ожидается [11,9] 2. ожидается точка с запятой [12,18] 3. { ожидается [13, 14] 4. ожидается at-правило или селектор[15,5] 5. } ожидается [31,13] 6. ожидаемый идентификатор [34,19] 7. { ожидается [35,20] 8. ожидается at-правило или селектор [36,9]
button{
background: black;
border: none;
padding: 10px 20px;
display: inline-block;
font-size: 1rem;
font-weight: 800;
width: 200;
cursor: pointer;
transform: skew(-21deg);
span{
display: inline-block;
transform: skew(21deg);
}
::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 100%;
left: 100%;
background: #000;
opacity: 0;
z-index: -1;
transition: all 0.5s;
}
::hover{
color: #fff;
::before{
left: 0;
right:0;
opacity: 1;
}
}
}
Предполагая, что вы используете стандартную таблицу стилей, вы не можете использовать вложенность стилей. Например:
button {
span {
...
}
::hover {
...
}
}
Css, показанный во фрагменте выше, не является допустимым (или стандартным) css. Вы можете сделать что-то вроде этого:
button {
...
}
button span {
...
}
button::hover {
...
}
или вы можете использовать scss
, который является препроцессором CSS и позволяет вам использовать вложение и другие интересные функции. Чтобы узнать подробности или другие способы реализации css в React, прочитайте это.
Если вы хотите использовать файл стиля .scss в своем проекте, необходимо установить нпм я дерзкий, поскольку вы используете стиль SASS, а не стиль CSS. Нажмите здесь - Стиль React SASS