Как изменить курсор, когда пользователь щелкает? - PullRequest
Новая
       0

Как изменить курсор, когда пользователь щелкает?

0 голосов
/ 05 мая 2020

Я пытаюсь создать собственный курсор для веб-сайта, который при нажатии в любом месте страницы курсор меняется на другое изображение, пока кнопка не будет снята, когда она вернется к исходному курсору. 

body {
    cursor: url('images/cursor.png'), auto;
}

Ответы [ 3 ]

1 голос
/ 05 мая 2020

Используйте :active в элементе html: 

html:active {
    cursor:pointer; /* url('images/cursor.png') */
}

html {
  min-height:100%;
}
<h1>title</h1>
<p>some text</p>
1 голос
/ 05 мая 2020

Вы можете просто использовать прослушиватель событий onclick в самом теле. 

document.body.onmousedown = () => {
  document.body.style.cursor = "not-allowed"
}

document.body.onmouseup = () => {
  document.body.style.cursor = `pointer`
}
body {
  height: 100vh;
  background: aliceblue;
  cursor: pointer;
}
0 голосов
/ 05 мая 2020 
<html>
<head>
<style>
.default_cursor {
    cursor: url('images/default.gif'), auto;    
}
.changed_cursor{
    cursor: url('images/changed.gif'), auto;
}
</style>
</head>

<body id="body" class="default_cursor">
Content Here

<script>
document.addEventListener("click", function(){
  document.getElementById("body").classList.toggle("changed_cursor"); //Toggle cursor.
});
</script>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...