Css рука при наведении: Курсор — CSS | MDN

 

  <голова>
    
    <стиль>
      ли {
        нижняя граница: 15px;
      }
      li. указатель {
        курсор: указатель;
      }
      ли: наведите {
        цвет фона: #ccc;
      }
    
  
  <тело>
     
Наведите курсор на элементы списка, чтобы увидеть, как курсор по умолчанию превращается в указатель:
 
    <ул>
      
Элемент списка 1 с курсором по умолчанию.
      
Выведите элемент списка 2 с помощью курсора-указателя.
      
Еще один элемент списка с курсором мыши по умолчанию.
    
  
 

 

  <голова>
    
    <стиль>
      li: nth-ребенок (нечетный) {
        фон: #1c87c9;
        курсор: прогресс;
        ширина: 50%;
        отступ: 5px;
      }
      li: nth-ребенок (четный) {
        фон: #ccc;
        курсор: указатель;
        ширина: 50%;
        отступ: 5px;
      }
    
  
  <тело>
    
Наведите курсор на элементы списка, чтобы увидеть, как меняется курсор:
    <ул>
      
Элемент 1
      
Элемент 2
      
Элемент 3.
      
Элемент 4.
      
Элемент 5.
      
Элемент 6.
      
Элемент 7.
    
  
 

Курсором по умолчанию для гиперссылки является «указатель». Чтобы изменить его, вам нужно указать тип курсора для вашего элемента с помощью селектора CSS :hover. В нашем примере мы стилизуем только класс «ссылка».

Пример изменения «указателя» на «по умолчанию»:

 

  <голова>
    
    <стиль>
      .ссылка:наведите {
        курсор: по умолчанию;
      }
    
  
  <тело>
    

      Наведите указатель мыши на гиперссылку, чтобы увидеть, как «указатель» меняется на «по умолчанию»:
    
    <р>
      W3docs
      ссылка с исходным типом "указатель".
    

    <р>
      W3docs
      ссылка с измененным типом курсора "по умолчанию".
    

  
 

Попробуй сам »

Поскольку по умолчанию ссылки имеют синий цвет и подчеркнуты, мы предлагаем изменить цвета ссылок и пойти дальше с гиперссылками.

Прочтите статью «Как изменить цвет ссылок с помощью CSS», чтобы узнать больше о ссылках.

Пример использования типа курсора «захватить» на гиперссылке:

 

  <голова>
    
    <стиль>
      а {
        курсор: захватить;
      }
    
  
  <тело>
     w3docs.com/" aria-label="домашняя страница w3docs">
      
    
  
 

Попробуй сам »

Давайте повеселимся с курсорами! Можно добавить изображение в качестве курсора на вашу веб-страницу. Вам просто нужно добавить свое изображение, указав его URL-адрес в качестве значения свойства курсора .

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

Это забавный трюк, который можно добавить на свой сайт, когда пользователи не ожидают увидеть такие вещи. Представьте, что у вас есть форма, в которой ответ соответствует определенной эмоции, вот идеальное место для использования изображений эмодзи.

Пример добавления изображения в качестве курсора:

 

  <голова>
    
    <стиль>
      тело {
        фон: #еее;
        выравнивание текста: по центру;
      }
      кнопка {
        отображение: встроенный блок;
        цвет фона: #1c87c9;
        цвет: #еее;
        поле: 25 пикселей;
        положение: родственник;
        ширина: 140 пикселей;
        высота: 45 пикселей;
        радиус границы: 3px;
        граница: нет;
        размер шрифта: 1. 5em;
        выравнивание текста: по центру;
        текстовое оформление: нет;
        box-shadow: 0 2px 8px 0 #999;
      }
      кнопка:наведите {
        цвет фона: #999;
        цвет: #ffcc00;
      }
      #счастливый {
        курсор: url("/uploads/media/default/0001/02/ee4486d1b3fc998e444c3b0100c73db282760eb5.png"), авто;
      }
      #грустный {
        курсор: url("/uploads/media/default/0001/02/38cb87a27305100311d9c96e5a5ebb88f04d8034.png"), авто;
      }
      #любовь {
        курсор: url("/uploads/media/default/0001/02/4be757cf6e9ffc865861649ca423654484ad3dc1.png"), авто;
      }
    
  
  <тело>
     
Какое у вас впечатление о нашем веб-сайте?
 
    Счастливый
    Грустно
    Любовь
  
 

Попробуй сам »

Пример использования значков в качестве курсора:

 

  <голова>
    
    <стиль>
      тело {
        ширина: 600 пикселей;
        поле: 0. 5em авто;
      }
      картинка {
        ширина: 280 пикселей;
        высота: 186 пикселей;
        поле: 5px;
        отображение: встроенный блок;
        фоновая позиция: 50% 50%;
      }
      .собака {
        курсор: url("/uploads/media/default/0001/02/53f34c2d574ce31a424df7855ef3e8f2ece589d6.png"), авто;
      }
      .кактус {
        курсор: url("/uploads/media/default/0001/02/ea8020fd3fdb96affa77c8164f80d88f8c419e0f.png"), авто;
      }
      .природа {
        курсор: url("/uploads/media/default/0001/02/edcafd9e202ae5f2ae6ae839d21d1d642b2ace00.png"), авто;
      }
      .дом {
        курсор: url("/uploads/media/default/0001/02/bb6f118f3b06838624b4297992457093f40fd92b.png"), авто;
      }
    
  
  <тело>
    
    
     png" alt="dog">
    
  
 

Попробуй сам »

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

Вот пример, который содержит все возможные типы, которые может иметь курсор.

Для значений «увеличение», «уменьшение», «захват» и «захват» добавлено расширение свойства -webkit-.

Пример использования всех типов курсоров:

  <голова> <стиль> тело {
 выравнивание текста: по центру;
 семейство шрифтов: Roboto, Helvetica, Arial, без засечек;
 }
 .курсор {
 дисплей: гибкий;
 flex-wrap: обернуть;
 }
 .курсор > раздел {
 гибкий: 120 пикселей;
 отступ: 10 пикселей 2 пикселя;
 пробел: nowrap;
 граница: 1px сплошная #666;
 радиус границы: 5px;
 поля: 0 5px 5px 0;
 }
 . курсор> div:наведите {
 фон: #1c87c9;
 }
 .авто {
 курсор: авто;
 }
 .дефолт {
 курсор: по умолчанию;
 }
 .никто {
 курсор: нет;
 }
 .контекстное меню {
 курсор: контекстное меню;
 }
 .помощь {
 курсор: помощь;
 }
 .указатель {
 курсор: указатель;
 }
 .прогресс {
 курсор: прогресс;
 }
 .ждать {
 курсор: подождите;
 }
 .клетка {
 курсор: ячейка;
 }
 .прицел {
 курсор: перекрестие;
 }
 .текст {
 курсор: текст;
 }
 .вертикальный текст {
 курсор: вертикальный текст;
 }
 .псевдоним {
 курсор: псевдоним;
 }
 .копировать {
 курсор: копировать;
 }
 .шаг {
 курсор: двигаться;
 }
 .no-drop {
 курсор: без выпадения;
 }
 .не допускается {
 курсор: не разрешено;
 }
 . все прокрутки {
 курсор: вся прокрутка;
 }
 .col-изменить размер {
 курсор: изменить размер столбца;
 }
 .row-изменить размер {
 курсор: изменение размера строки;
 }
 .n-изменить размер {
 курсор: n-изменить размер;
 }
 .e-изменить размер {
 курсор: изменить размер;
 }
 .s-изменить размер {
 курсор: s-изменить размер;
 }
 .w-изменить размер {
 курсор: w-изменить размер;
 }
 .ns-изменить размер {
 курсор: ns-изменить размер;
 }
 .ew-изменить размер {
 курсор: ew-изменить размер;
 }
 .ne-изменить размер {
 курсор: изменить размер;
 }
 .nw-изменить размер {
 курсор: nw-изменить размер;
 }
 .se-изменить размер {
 курсор: se-изменить размер;
 }
 .sw-изменить размер {
 курсор: sw-изменить размер;
 }
 .new-изменить размер {
 курсор: новое изменение размера;
 }
 .