КодSEOБлогИное

Курсор мыши в виде руки, лупы и т. д.

Курсор мышки в виде руки с указательным пальцем

Навести
<style>
.cursor {
    cursor: pointer;
} 
</style>

<span class="cursor">Навести</span>

cursor

значение в зависимости от свойств элемента, на который наведена мышь. Например, при наведении на ссылку, отобразится курсор pointer
обычный основной вид курсора
курсор не отображается
можно выделить текст
можно выделить вертикальный текст
можно выделить клетку или клети таблицы
можно выделить биты на битовой карте
можно вызвать контекстное меню
можно скопировать данные
можно получить дополнительную информацию (например, как сделать всплывающую подсказку)
можно перейти по ссылке (например, как сделать появляющийся текст в HTML)
можно перейти по ссылке внутри страницы
можно переместиться по странице (скроллинг во все стороны)
можно переместить объект
можно схватить объект
можно переместить схваченный объект
нельзя сбросить схваченный объект
нельзя выполнить действие
программа занята, можно взаимодействовать с интерфейсом
программа занята, нельзя взаимодействовать с интерфейсом
можно увеличить объект (например, как сделать увеличивающиеся изображения)
можно уменьшить объект
можно растянуть объект вверх
можно растянуть объект в правый верхний угол
можно растянуть объект вправо
можно растянуть объект в правый нижний угол
можно растянуть объект вниз
можно растянуть объект в левый нижний угол
можно растянуть объект влево
можно растянуть объект в правый верхний угол
можно растянуть/сузить объект по горизонтали
можно растянуть/сузить объект по диагонали снизу вверх
можно растянуть/сузить объект по вертикали
можно растянуть/сузить объект по диагонали сверху вниз
можно растянуть/сузить объект по горизонтали
можно растянуть/сузить объект по вертикали
auto
наследует значение родителя
наследует значение родителя
Навести
<style>
div {
  cursor: auto; /* свойство cursor наследуется, применяется ко всем элементам */ 
}
</style>

<div>Навести</div>

Свой стиль курсора для ссылок, открывающихся в новом окне

CSS селекторы
<style>
a[target="_blank"] {
    cursor: url(//2.bp.blogspot.com/-XhlZKpxWdHg/T1R_fSOi9zI/AAAAAAAACw8/g7hup5BWWaI/s400/kursor.png) 5 0, pointer; /* 5 0 - два числа от 0 до 32 смещают изображение указателя по горизонтали и по верттикали соответственно; если браузер не загрузит изображение, то отобразится курсор pointer */ 
}
</style>

<a href="/2011/10/css-selectors.html" target="_blank">CSS селекторы</a>
Все комментарии