Стиль курсора мыши при наведении CSS
 | |
| Если кто не знает, то существует большое количество стилей курсора, которое меняется при наведении на элемент, что в этой статье все рассмотрим. Ведь многие интернет порталы меняют стилистику курсора, что делают для удобства гостей и безусловно пользователя, а также, чтоб все выглядело оригинально и в каком то случай уникально в своем виденье. Выстраиваемая настройка на курсор производится не сложным способом, где появляется возможность добавить дополнительный эффект вашему сайту, в том случай, когда это необходимо. Для указания основного вида, который будет по умолчанию, то здесь нужно задействовать свойство курсора при помощи CSS. Также все это свойство задействованы для полного изменения типа курсора, который производится на элементах. Это станет актуальным на сайтах или блогах, где нужно выполнять различные действия, а не просто кликать. И даже при клике есть вариант выставить ту вариацию курсора, что безусловно от стандартного будет кардинально отличатся. Эта статья поможет вам управлять оригинальным стилем на курсоре на CSS, что в какой-то мере может улучшить взаимодействие с пользователем. Мы рассмотрим следующие способы управления удобством использования курсора: 1. Создание курсора рукой, когда пользователь наводит на списки или элемент под ссылкой; 2. Полное изменение курсора, который или при наведении на ключевые слова или ссылки; 3. Как создать пользовательский эффект картинки курсора на элементе; 4. Пример всех типов курсоров; Создать стандартный курсор, когда пользователь наводит на элемент списка ии перехода. Стиль будет выглядеть так, если вы хотите установить указатель пальца: CSS Код li { cursor: pointer; } Теперь давайте посмотрим на пример для иллюстрации метода, упомянутого выше: Решили кардинально поменять или изменить вид указателя мыши, то здесь нужно изменить стилистику под основу курсора для вашего элемента списка li - где стиль только идет под заданный элемента. Ваш код будет выглядеть так, если вы хотите установить указатель пальца: Код <!DOCTYPE html> <html> <head> <title>Наименование документа</title> <style> li{ margin-bottom:15px; } li.kysogden { cursor: pointer; } li:hover { background-color: #ccc; } </style> </head> <body> <h4>Наведите указатель мыши на элементы списка, чтобы увидеть, как курсор по умолчанию превращается в указатель:</h4> <ul> <li>Элемент списка 1 с курсором по умолчанию.</li> <li class="kysogden">Элемент списка 2 с указателем курсора.</li> <li>Еще один элемент списка с курсором мыши по умолчанию.</li> </ul> </body> </html> Здесь добавили класс kysogden и появился стандарт, что на demo странице можно посмотреть. Демонстрация Рассмотрим еще один неординарный пример, где задействуем изображение, которое в виде изображения, где под каждое наведении идет свой вид, что не будет повториться. Теперь есть возможность задействовать знаки ресурса, где предоставляется код, но главное есть значение URL-адреса. Где самостоятельно загружаем значок на свой сайт с последствием вывода URL-адрес под визуальный просмотр курсора при наведении. Код <!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> body { width: 600px; margin: 0.5em auto; } img { width: 280px; height: 186px; margin: 5px; display: inline-block; background-position: 50% 50%; } .dog { cursor: url("http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/xsan-1.png"), auto; } .cactus { cursor: url("http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/xsan-2.png"), auto; } .nature { cursor: url("http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/xsan-3.png"), auto; } .house { cursor: url("http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/xsan-4.png"), auto; } </style> </head> <body> <img class="cactus" src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/kisan-1.png" alt="cactus"> <img class="nature" src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/kisan-2.png" alt="nature"> <img class="dog" src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/kisan-3.png" alt="dog"> <img class="house" src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/kisan-4.png" alt="house"> </body> </html> Где лучше перейти на страницу, где все подробно показано, что сами можете зависти на любое изображение и увидеть как выглядит курсор. Демонстрация Настроить курсоры как можно заметить не сильно сложно, как изначально может показаться. Где при правильном использовании можно создать красивый и реально уникальный вид при наведении, сто в большинстве все зависит от тематической группы, где находится сайт.  Примеры всех типов курсоров HTML Код <div class="cursor"> <div class="auto">auto</div> <div class="default">default</div> <div class="none">none</div> <div class="context-menu">context-menu</div> <div class="help">help</div> <div class="pointer">pointer</div> <div class="progress">progress</div> <div class="wait">wait</div> <div class="cell">cell</div> <div class="crosshair">crosshair</div> <div class="text">text</div> <div class="vertical-text">vertical-text</div> <div class="alias">alias</div> <div class="copy">copy</div> <div class="move">move</div> <div class="no-drop">no-drop</div> <div class="not-allowed">not-allowed</div> <div class="all-scroll">all-scroll</div> <div class="col-resize">col-resize</div> <div class="row-resize">row-resize</div> <div class="n-resize">n-resize</div> <div class="s-resize">s-resize</div> <div class="e-resize">e-resize</div> <div class="w-resize">w-resize</div> <div class="ns-resize">ns-resize</div> <div class="ew-resize">ew-resize</div> <div class="ne-resize">ne-resize</div> <div class="nw-resize">nw-resize</div> <div class="se-resize">se-resize</div> <div class="sw-resize">sw-resize</div> <div class="nesw-resize">nesw-resize</div> <div class="nwse-resize">nwse-resize</div> <div class="grab">grab</div> <div class="grabbing">grabbing</div> <div class="zoom-in">zoom-in</div> <div class="zoom-out">zoom-out</div> </div> CSS Код body { text-align: center; font-family: Roboto, Helvetica, Arial, sans-serif; } .cursor { display: flex; flex-wrap: wrap; } .cursor > div { flex: 120px; padding: 10px 2px; white-space: nowrap; border: 1px solid #666; border-radius: 5px; margin: 0 5px 5px 0; } .cursor > div:hover { background: #1c87c9; } .auto { cursor: auto; } .default { cursor: default; } .none { cursor: none; } .context-menu { cursor: context-menu; } .help { cursor: help; } .pointer { cursor: pointer; } .progress { cursor: progress; } .wait { cursor: wait; } .cell { cursor: cell; } .crosshair { cursor: crosshair; } .text { cursor: text; } .vertical-text { cursor: vertical-text; } .alias { cursor: alias; } .copy { cursor: copy; } .move { cursor: move; } .no-drop { cursor: no-drop; } .not-allowed { cursor: not-allowed; } .all-scroll { cursor: all-scroll; } .col-resize { cursor: col-resize; } .row-resize { cursor: row-resize; } .n-resize { cursor: n-resize; } .e-resize { cursor: e-resize; } .s-resize { cursor: s-resize; } .w-resize { cursor: w-resize; } .ns-resize { cursor: ns-resize; } .ew-resize { cursor: ew-resize; } .ne-resize { cursor: ne-resize; } .nw-resize { cursor: nw-resize; } .se-resize { cursor: se-resize; } .sw-resize { cursor: sw-resize; } .nesw-resize { cursor: nesw-resize; } .nwse-resize { cursor: nwse-resize; } .grab { cursor: -webkit-grab; cursor: grab; } .grabbing { cursor: -webkit-grabbing; cursor: grabbing; } .zoom-in { cursor: -webkit-zoom-in; cursor: zoom-in; } .zoom-out { cursor: -webkit-zoom-out; cursor: zoom-out; } В этой статье вы узнали о нескольких способах управления курсором при помощи CSS, которые могут улучшить пользовательский опыт, и этим сделать портал немного оригинальнее от других. Осталось представить большой набор курсоров на demo странице. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |