cursor
Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной руки, появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все как есть.
Синтаксис
cursor: [url(‘путь к курсору’),] | [ auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | inherit ]
Значения
url Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором. auto Вид курсора по умолчанию для текущего элемента. inherit Наследует значение родителя.
Остальные допустимые значения приведены в табл. 1.
| Вид | Значение | Тест | Пример |
|---|---|---|---|
 | default | P | |
 | crosshair | P | |
 | help | P | |
 | move | P | |
 | pointer | P | |
 | progress | P | |
 | text | P | |
 | wait | P | |
 | n-resize | P | |
 | ne-resize | P | |
 | e-resize | P | |
| se-resize | P | ||
 | s-resize | P | |
 | sw-resize | P | |
 | w-resize | P | |
 | nw-resize | P |
В зависимости от операционной системы и ее настроек вид курсора может отличаться от приведенных в таблице.
При добавлении курсора из файла синтаксис несколько видоизменится.
cursor: url(‘путь к курсору1’), url(‘путь к курсору2’), .
Через запятую допускается указывать несколько значений url , в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдет к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer , допустимые значения перечислены выше.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства cursor
HTML5 CSS2.1 IE Cr Op Sa Fx
Обычный текст
Ссылка 1 Ссылка 2 Ссылка 3
Объектная модель
[window.]document.getElementById(» elementID «).style.cursorБраузеры
Некоторые браузеры поддерживают дополнительные формы курсоров. Например, Internet Explorer и Opera работает со значением hand , которое является аналогом значения pointer . Кроме того, в браузерах Safari, Chrome и Firefox будут действовать следующие значения: all-scroll , col-resize , no-drop , not-allowed , row-resize , vertical-text . Учтите, что указанные значения не входят в спецификацию CSS 2.1, но соответствуют спецификации CSS3 (кроме hand ).
Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.
Opera не работает с файлами курсора.
Курсоры
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной «руки», появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все по умолчанию.
В табл. 1 приведены возможные варианты курсоров. Их вид может отличаться от конечного результата, это зависит от настроек операционной системы.
| Вид | Значение | Тест | Пример |
|---|---|---|---|
 | default | cursor: default | |
 | crosshair | cursor: crosshair | |
 | pointer | cursor: pointer | |
 | move | cursor: move | |
 | text | cursor: text | |
 | wait | cursor: wait | |
 | help | cursor: help | |
 | n-resize | cursor: n-resize | |
 | ne-resize | cursor: ne-resize | |
 | e-resize | cursor: e-resize | |
 | se-resize | cursor: se-resize | |
 | s-resize | cursor: s-resize | |
 | sw-resize | cursor: sw-resize | |
 | w-resize | cursor: w-resize | |
 | nw-resize | cursor: nw-resize |
Синтаксис создания курсора очень прост. Следует определить класс и в нем использовать один из типов курсора, описанных в таблице. Ниже в примере 1 показано, как можно переопределить вид курсора при наведении его на разные ссылки.
Пример 1. Изменение курсора при наведении его на ссылку
.movelink < cursor: move; >.helplink Если вы желаете переопределить курсор мыши для всей веб-страницы целиком, а не только для ссылок, воспользуйтесь селектором BODY (пример 2).
Пример 2. Изменение вида курсора для всей веб-страницы
body ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ
СПРАВКА
Также можно задать разный вид курсора для отдельных областей веб-страницы используя теги или . В этом случае вначале определяется класс и его стиль, а затем он применяется к тегу, например, . Такой подход позволяет описать стиль один единственный раз, а затем применять его в любом нужном месте (пример 3).
Пример 3. Курсор для разных областей веб-страницы
Отображение скрытых элементов при наведении мыши на гиперссылку или на тег
При наведении мыши скрытые элементы HTML могут стать видимыми с помощью CSS. В этой статье вы научитесь, как отображать скрытые элементы. Можно применять CSS для отображения любого HTML-элемента при наведении мыши на тег , используя смежные одноуровневые селекторы. Смежный одноуровневый селектор используется, чтобы выбрать смежный элемент или элемент, находящийся рядом с указанным тегом селектора. Этот комбинатор выбирает только один тег, который находится рядом с указанным тегом.
Рассмотрим пример и попробуем разобраться с каждой частью кода.
1.Создайте HTML
body> h2>W3docsh2> b> Наведите мышь на элемент внизу, чтобы увидеть div-элемент. b>
a href=”https://www.w3docs.com/”>W3docs Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. 2. Добавьте CSS
- Выберите цвет для тега с помощью свойства color.
- Используйте свойство display для и задайте значение «none». Это значит, что элемент не будет отображаться.
- Используйте свойство border, чтобы добавить границу к div, и задайте значения свойств border-width, border-style и border-color.
- Используйте свойство cursor со значением «pointer» для тега .
- Используйте смежный одноуровневый селектор. В нашем примере выбраны все элементы , находящиеся сразу после элемента :
- Используйте свойство display и задайте значение «block».
- Задайте цвет текста с помощью свойства color. Можете выбрать любой цвет из инструмента Выбор цвета.
- Задайте font-size для div.
h2 < color: #4287f5; > div < display: none; border: 5px double #b4b8bf; > a< cursor:pointer; > a:hover + div < display: block; color: #4287f5; font-size: 20px; >Ниже показан результат нашего кода:
Пример
html> html> title>Заголовок документа title> head> style> h2 < color: #4287f5; > div < display: none; border: 5px double #b4b8bf; > a< cursor:pointer; > a:hover + div < display: block; color: #4287f5; font-size: 20px; > style> head> body> center> h2>W3docs h2> b> Наведите мышь на элемент внизу, чтобы увидеть div-элемент. b> br> br> a href=”https://www.w3docs.com/”>W3docs a> div> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. div> center> body> html>Пример
html> html> title>Заголовок документа title> head> style> main< text-align:center; > h2 < color: green; > div < display: none; border: 5px double #b4b8bf; > a< display:block; margin-top:15px; cursor:pointer; > a:hover + div < display: block; color: #4287f5; font-size: 20px; > style> head> body> main> h2>W3docs h2> strong> Наведите мышь на элемент внизу, чтобы увидеть div-элемент. strong> a href=”https://www.w3docs.com/”>W3docs a> div> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. div> main> body> html>Пример
html> html> title>Заголовок документа title> head> style> div< text-align:center; > h2 < color: green; > .hide < display: none; border: 5px double #b4b8bf; > a< display:block; margin-top:15px; cursor:pointer; text-decoration:none; > a:hover + div < display: block; color: #4287f5; font-size: 20px; > style> head> body> div> h2>W3docs h2> strong> Наведите мышь на элемент внизу, чтобы увидеть div-элемент. strong> a href=”https://www.w3docs.com/”>W3docs a> div class="hide"> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. div> div> body> html>В этом примере мы использовали тег внутри другого и добавили для него класс “hide”. Здесь получается одинаковый результат.
Пример
html> html> title>Заголовок документа title> head> style> div< text-align:center; > h2 < color: #4287f5; > .hide < display: none; border: 5px double #b4b8bf; > a< display:block; margin-top:15px; cursor:pointer; text-decoration:none; > a:hover + span < display: block; color: #4287f5; font-size: 20px; > style> head> body> div> h2>W3docs h2> strong> Наведите мышь на элемент внизу, чтобы увидеть div-элемент. strong> a href=”https://www.w3docs.com/”>W3docs a> span class="hide"> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. span> div> body> html>В этом примере мы использовали тег a вместе с классом “hide”. Это пустой контейнер. Тег объединяет элементы уровня блока, а объединяет строчные элементы.