ZorNet.Ru — сайт для вебмастера » HTML и CSS » Как изменить курсор сайта с помощью CSS

Как изменить курсор сайта с помощью CSS

Здесь подробно описано, как веб-разработчик может изменить курсор на сайте с применением CSS, где при наведении курсор кардинально изменяется. Вероятно вы уже не раз встречали или работали с веб сайтами, особенно с приложений и интерфейсов. Здесь не нужно сильно знать HTML, где хватит базовых знания CSS, для того, чтоб сменить курсор на тот который выберете.

Установка различных курсоров очень важна для того, чтобы пользователь понял, что он может щелкнуть элемент, что он может изменить его размер. Вот почему существует CSS-свойство cursor, которое позволит нам определить, какой тип курсора мы хотим использовать в каждом элементе.

HTML

Код

<div class="alias">alias</div>
<div class="all-scroll">all-scroll</div>
<div class="auto">auto</div>
<div class="cell">cell</div>
<div class="context-menu">context-menu</div>
<div class="col-resize">col-resize</div>
<div class="copy">copy</div>
<div class="crosshair">crosshair</div>
<div class="default">default</div>
<div class="e-resize">e-resize</div>
<div class="ew-resize">ew-resize</div>
<div class="grab">grab</div>
<div class="grabbing">grabbing</div>
<div class="help">help</div>
<div class="move">move</div>
<div class="n-resize">n-resize</div>
<div class="ne-resize">ne-resize</div>
<div class="nesw-resize">nesw-resize</div>
<div class="ns-resize">ns-resize</div>
<div class="nw-resize">nw-resize</div>
<div class="nwse-resize">nwse-resize</div>
<div class="no-drop">no-drop</div>
<div class="none">none</div>
<div class="not-allowed">not-allowed</div>
<div class="pointer">pointer</div>
<div class="progress">progress</div>
<div class="row-resize">row-resize</div>
<div class="s-resize">s-resize</div>
<div class="se-resize">se-resize</div>
<div class="sw-resize">sw-resize</div>
<div class="text">text</div>
<div class="url">url()</div>
<div class="vertical-text">vertical Text</div>
<div class="w-resize">w-resize</div>
<div class="wait">wait</div>
<div class="zoom-in">zoom-in</div>
<div class="zoom-out">zoom-out</div>

CSS

Код

div {
  background:#4A88F4;
  width:145px;
  margin:5px;
  display:inline-block;
  text-align:center;
  padding:20px 0;
  color:#fff;
}

div:hover {background:#302F2F;}

.alias {cursor:alias;}
.all-scroll{cursor:all-scroll;}
.auto {cursor:auto;}
.cell {cursor:cell;}
.context-menu{cursor:context-menu;}
.col-resize{cursor:col-resize;}
.copy{cursor:copy;}
.crosshair{cursor:crosshair;}
.default{cursor:default;}
.e-resize{cursor:e-resize;}
.ew-resize{cursor:ew-resize;}
.grab{cursor:grab;}
.grabbing{cursor:grabbing;}
.help{cursor:help;}
.move{cursor:move;}
.n-resize{cursor:n-resize;}
.ne-resize{cursor:ne-resize;}
.nesw-resize{cursor:nesw-resize;}
.ns-resize{cursor:ns-resize;}
.nw-resize{cursor:nw-resize;}
.nwse-resize{cursor:nwse-resize;}
.no-drop{cursor:no-drop;}
.none{cursor:none;}
.not-allowed{cursor:not-allowed;}
.pointer{cursor:pointer;}
.progress{cursor:progress;}
.row-resize{cursor:row-resize;}
.s-resize{cursor:s-resize;}
.se-resize{cursor:se-resize;}
.sw-resize{cursor:sw-resize;}
.text{cursor:text;}
.url{cursor:url(cursor.gif), auto;}
.vertical-text{cursor:vertical-text;}
.w-resize{cursor:w-resize;}
.wait{cursor:wait;}
.zoom-in{cursor:zoom-in;}
.zoom-out{cursor:zoom-out;}

Единственное, что нам нужно сделать, чтобы изменить курсор элемента, это применить следующее свойство CSS, для значения курсора, которое вы хотите для этого элемента, следующим образом:

Код

div {
cursor:pointer;
}

В этом предыдущем примере мы изменяем все курсоры div изменения типичной стрелки указателем, подобным тому, который появляется, когда мы наводим указатель мыши на ссылку.

Мы можем использовать 37 типов курсоров, которые здесь приведены.

See the Pen
Курсоры CSS by Kocsten (@kocsten)
on CodePen.

Добавить изображение как курсор

Как вы, возможно, уже заметили в URL-курсоре, то здесь можем добавить свое собственное изображение, если вы хотите иметь собственный курсор. Для этого мы должны использовать свойство курсора с его значением url и адресом изображения в формате .gif, где прописать в CSS, и будет так выглядеть.

Код

.url{cursor:url(Ссылка на изображение.gif), auto;}

После URL-адреса установлено значение auto, сделано для того, чтоб настроить его на использование автоматического курсора.

10 Февраля 2019 Просмотров: 2779 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0