#css #svg
#css #svg
Вопрос:
Я пытаюсь установить пользовательское изображение курсора при наведении курсора на определенный элемент. Я попытался поместить свой svg значок в src папку и вызвать его в стилизованных компонентах как
const HStyles = styled.h3`
cursor: url("images/pen-tool.svg");
`;
Но это не меняет курсор на изображение пера. Я также пробовал
cursor: url('images/pen-tool.svg'),
url('images/pen-tool.cur');
cursor: url('images/pen-tool.svg'),
move;
Мой svg имеет ширину и высоту, определенные в его svg теге, но все равно не работает. Я что-то здесь упускаю?
Вы можете проверить мой пример code sandbox здесь
Комментарии:
1. Работает ли это в обычном (не реагирующем, без JS) файле HTML CSS?
2. Я только что протестировал его, и, похоже, он не работает с обычным HTML и CSS
Ответ №1:
const HStyles = styled.h3`
cursor: url("images/pen-tool.svg");
`;
Компоненты в стиле CSS- in-JS. Вы не можете писать объявления типа «images / pen-tool.svg» и должны вызывать переменную из import.
Просто импортируйте images/pen-tool.svg и назовите его как:
import penTool from "./images/pen-tool.svg";
const HStyles = styled.h3`
cursor: url(${HStyles}), auto;
`;
и не забудьте «авто»
Комментарии:
1. Спасибо за помощь, но это тоже не работает. Я обновил свой codesandbox вашим ответом.
2. codesandbox не может изменить курсор (по соображениям конфиденциальности или безопасности, я точно не помню). Просто попробуйте свой код (из codesandbox) в react. Я проверил этот код в своей среде webstorm, и он работает нормально.
3. Для понимания. Codesandbox имеет исключение в этой проблеме. Но если вы хотите изменить курсор на стилизованные компоненты — вы правильно сделали в своем обновленном примере codesandbox