Кастомизированный курсор может добавить эффектности вашему сайту, а если мы ещё добавим изменения курсора при наведении на какие-то блоки, то будет очень круто.
Начнем с первой части кода, которую нужно добавить в раздел Elementor – Custom Code. При добавлении под заголовком (заголовок указываете произвольный), нужно выбрать Location: </body> – End и поставить галочку, что бы открывалось после загрузки jQuery (Always load jQuery).
<div id="curs" class="cursor"></div>
<script>
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.pageX + 'px';
cursor.style.top = e.pageY + 'px';
})
jQuery('#inst').hover(
function(){ jQuery('#curs').addClass('curshoveri')},
function(){ jQuery('#curs').removeClass('curshoveri')}
)
jQuery('#you').hover(
function(){ jQuery('#curs').addClass('curshovery')},
function(){ jQuery('#curs').removeClass('curshovery')}
)
jQuery('#tg').hover(
function(){ jQuery('#curs').addClass('curshovert')},
function(){ jQuery('#curs').removeClass('curshovert')}
)
</script>
Если пройтись по коду то в первой строке мы создаем курсор на самой странице, дальше строка 3-7 отвечает за движение этого курсора за мышкой. Нам ваши строки, который идут дальше, начиная с 9 и до 22.
У нас есть 3 почти идентичных блока, давайте их разберем.
В 9 строке кода мы находим ID #inst на сайте. Задать id вы можете в настройках секции или колонки в Elementor во вкладке “Расширенные”, вы просто вводите в CSS ID значение (в моем случае это inst БЕЗ РЕШЕТКИ.).
В 10 строке кода мы добавляем при наведении для нашего курсора CSS класс cursorhoveri, который и будет менять наш курсор на картинку.
В 11 строке кода мы убираем этотм класс и возвращаемся к нашему обычному курсору.
В следующей части кода всё повторяется, только для блоков с ID you и tg.
CSS
Теперь переходим к стилям нашего курсора. Для удобства их можете добавить в раздел Внешний вид – Настроить – Дополнительные стили<.mark>
/* Отключаем системный курсор */
body {
cursor: none !important;
}
/* Создаем наш кастомный курсор */
.cursor {
position: fixed;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
transition: 0.1s;
transform: translate(-50%, -50%);
pointer-events: none;
mix-blend-mode: difference;
}
/* Курсор при наведении на блок с id inst */
.curshoveri {
position: fixed;
width: 120px;
height: 120px;
background: url("ССЫЛКА НА КАРТИНКУ");
background-size: cover;
border-radius: 50%;
transition: 0.1s;
transform: translate(-50%, -50%);
pointer-events: none;
mix-blend-mode: difference;
}
/* Курсор при наведении на блок с id you */
.curshovery {
position: fixed;
width: 120px;
height: 120px;
background: url("ССЫЛКА НА КАРТИНКУ");
background-size: cover;
border-radius: 50%;
transition: 0.1s;
transform: translate(-50%, -50%);
pointer-events: none;
mix-blend-mode: difference;
}
/* Курсор при наведении на блок с id tg */
.curshovert {
position: fixed;
width: 120px;
height: 120px;
background: url("ССЫЛКА НА КАРТИНКУ");
background-size: cover;
border-radius: 50%;
transition: 0.1s;
transform: translate(-50%, -50%);
pointer-events: none;
mix-blend-mode: difference;
}
