Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Css cursor: Курсор — CSS | MDN

On

Css cursor: Курсор — CSS | MDN

By alexxlab

Содержание

CSS cursor

ЗначениеОписание
aliasКурсор указывает на то, что создается псевдоним
all-scrollКурсор указывает, что что-то можно прокручивать в любом направлении
autoПо умолчанию. Обозреватель устанавливает курсор
cellКурсор указывает, что ячейка (или набор ячеек) может быть выбрана
context-menuКурсор указывает, что контекстное меню доступно
col-resizeКурсор указывает, что столбец может быть изменен горизонтально
copyКурсор указывает, что что-то копируется
crosshairКурсор отображается в виде перекрестия
defaultКурсор по умолчанию
e-resizeКурсор указывает, что край прямоугольника должен быть перемещен вправо (восток)
ew-resizeУказывает на двунаправленное изменение размера курсора
grabКурсор указывает, что что-то можно захватить
grabbingКурсор указывает, что что-то можно захватить
helpКурсор указывает, что справка доступна
moveКурсор указывает, что что-то должно быть перемещено
n-resizeКурсор указывает на то, что край прямоугольника должен быть перемещен вверх (север)
ne-resizeКурсор указывает, что край прямоугольника должен быть перемещен вверх и вправо (север/восток)
nesw-resizeУказывает на двунаправленное изменение размера курсора
ns-resizeУказывает на двунаправленное изменение размера курсора
nw-resizeКурсор указывает, что край прямоугольника должен быть перемещен вверх и влево (Север/Запад)
nwse-resizeУказывает на двунаправленное изменение размера курсора
no-dropКурсор указывает, что перетаскивание элемента не может быть удалено здесь
noneДля элемента не отображается курсор
not-allowedКурсор указывает, что запрошенное действие не будет выполнено
pointerКурсор является указателем и указывает ссылку
progressКурсор указывает, что программа занята (выполняется)
row-resizeКурсор указывает, что строка может быть изменена по вертикали
s-resizeКурсор указывает, что край прямоугольника должен быть перемещен вниз (Юг)
se-resizeКурсор указывает, что край прямоугольника должен быть перемещен вниз и вправо (Юг/Восток)
sw-resizeКурсор указывает, что край прямоугольника должен быть перемещен вниз и влево (Юг/Запад)
textКурсор указывает текст, который может быть выбран
URLРазделенный запятыми список URL-адресов для пользовательских курсоров. Примечание: Всегда указывайте универсальный курсор в конце списка, если ни один из определяемых URL-адресов курсоров не может быть использован
vertical-textКурсор указывает вертикальный текст, который может быть выбран
w-resizeКурсор указывает на то, что край прямоугольника должен быть перемещен влево (запад)
waitКурсор указывает, что программа занята
zoom-inКурсор указывает на то, что можно увеличить
zoom-outКурсор указывает, что что-то может быть уменьшено
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Свойство cursor | CSS справочник

CSS свойство cursor определяет тип отображаемого курсора.

ЗначениеОписание
aliasКурсор указывает, что алиас или ярлык будет создан.
all-scrollКурсор показывает, что что-то можно прокручивать в любом направлении.
autoБраузер устанавливает курсор. Это значение по умолчанию.
cellКурсор указывает на то, что ячейка (или группа ячеек) может быть выбрана.
context-menuКурсор указывает на то, что контекстное меню доступно.
col-resizeКурсор указывает, что столбец может быть изменен по горизонтали.
copyКурсор указывает, что что-то может быть скопировано.
crosshairКурсор в виде перекрестия. Go! go! go!.
defaultКурсор по умолчанию.
e-resizeКурсор указывает, что край блока перемещается вправо (east-восток).
ew-resizeКурсор указывает, двунаправленное изменение размера.
grabКурсор указывает, что что-то можно схватить (перенести).
grabbingКурсор указывает, что что-то переносится.
helpКурсор указывает на то, что доступна помощь.
moveКурсор указывает на то, что что-то можно переместить.
n-resizeКурсор указывает, что край блока перемещается вверх (north — север).
ne-resizeКурсор указывает, что край блока перемещается вверх и право (north/east — север/восток).
nesw-resizeКурсор указывает, двунаправленное изменение размера.
ns-resizeКурсор указывает, двунаправленное изменение размера.
nw-resizeКурсор указывает, что край блока перемещается вверх и влево (north/west — север/запад).
nwse-resizeКурсор указывает, двунаправленное изменение размера.
no-dropКурсор указывает, что перетаскиваемый объект не может быть помещён здесь.
noneКурсор не отображается для элемента.
not-allowedКурсор указывает, что запрошенное действие не будет выполняться.
pointerКурсор-указатель (как правило указывает ссылку).
progressКурсор указывает на то, что программа выполняется.
row-resizeКурсор указывает на то, что ряд может быть изменен по вертикали.
s-resizeКурсор указывает, что край блока перемещается вниз (south — юг).
se-resizeКурсор указывает, что край блока перемещается вниз и право (south/east — юг/восток).
sw-resizeКурсор указывает, что край блока перемещается вниз и влево (south/west — юг/запад).
textКурсор указывает, что текст может быть выбран (выделен).
URL (свой)Пользовательский курсор. Допускается указывать через запятую несколько вариантов.
IExplorer не поддерживает пользовательские курсоры. Если у Вас не отображается Ваше изображение — попробуйте в графическом редакторе убрать у него задний фон (сделать прозрачным).
Пример (если для курсора не загружено первое изображение, то браузер использует второе, если и второе не будет загружено, то браузер установит курсор по умолчанию):
cursor: url(/images/mini3.png), url(/images/mini5.png), auto;
vertical-textКурсор указывает, что вертикальный текст может быть выбран (выделен).
w-resizeКурсор указывает, что край блока перемещается влево (west-запад).
waitКурсор указывает на то, что программа в настоящее время занята.
zoom-inКурсор показывает, что что-то может быть увеличено.
zoom-outКурсор показывает, что что-то может быть уменьшено.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Руководство CSS Cursors

CSS cursor позволяет вам определить тип курсора (cursor), который отображается для пользователя, когда курсор на поверхности (over) элемента.

/* Keyword value */
cursor: pointer;
cursor: auto;
.....

/* Global values */
cursor: inherit;
cursor: initial;
cursor: unset;

cursor-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS cursor</title>
      <meta charset="UTF-8"/>
      <style>
          .container {
             display: grid;
             grid-template-columns: auto auto auto;
          }
          .child {
            padding: 5px;
            margin: 5px;
            border: 1px solid gray;
          }
      </style>
   </head>
   <body>
       <h4>CSS cursor</h4>

       <p>
          Move the cursor over the elements to see the results.
       </p>

      <div>
        <div style = "cursor:alias">alias</div>
        <div style = "cursor:all-scroll">all-scroll</div>
        <div style = "cursor:auto">auto</div>
        <div style = "cursor:copy">copy</div>
        <div style = "cursor:crosshair">crosshair</div>
        <div style = "cursor:default">default</div>
        <div style = "cursor:help">help</div>
        <div style = "cursor:inherit">inherit</div>
        <div style = "cursor:move">move</div>

        <div style = "cursor:pointer">pointer</div>
        <div style = "cursor:progress">progress</div>
        <div style = "cursor:text">text</div>
        <div style = "cursor:vertical-text">vertical-text</div>

        <div style = "cursor:wait">wait</div>
        <div style = "cursor:no-drop">no-drop</div>

        <div style = "cursor:grab">grab</div>
        <div style = "cursor:grabbing">grabbing</div>

        <div style = "cursor:e-resize">e-resize</div>
        <div style = "cursor:n-resize">n-resize</div>
        <div style = "cursor:s-resize">s-resize</div>
        <div style = "cursor:w-resize">w-resize</div>

        <div style = "cursor:col-resize">col-resize</div>
        <div style = "cursor:row-resize">row-resize</div>

        <div style = "cursor:ne-resize">ne-resize</div>
        <div style = "cursor:nw-resize">nw-resize</div>
        <div style = "cursor:se-resize">se-resize</div>
        <div style = "cursor:sw-resize">sw-resize</div>

        <div style = "cursor:nesw-resize">nesw-resize</div>
        <div style = "cursor:nwse-resize">nwse-resize</div>

        <div style = "cursor:zoom-in">zoom-in</div>
        <div style = "cursor:zoom-out">zoom-out</div>
      </div>
   </body>
</html>

Предопределенные значения у CSS cursor и иъ соответствующие формы легко понять, вы можете посмотреть изображение ниже:

CSS {cursor:auto}

Форма курсора (cursor) соответствуте значению auto в зависимости от контекста региона над которым находится курсор (over). Например, курсор будет иметь форму hand (руки) когда он находится над ссылкой,…

CSS {cursor:default}

Форму курсора (cursor) соответствует значению default в зависимости от платформы (platform), точнее в зависимости от операционной системы и браузера. Обычно это форма стрелы (arrow).

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

/* URL and coordinates, with a keyword fallback */

cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor1.png), url(cursor2.png) 2 2, pointer;

Url(..)

Вы можете предоставить одно или более значений url(..), они отделены друг от друга запятой ( , ). Первому значению будет присвоен приоритет для использования, следующие значения являются резервными, они используются в случае если браузер не поддерживает формат определенного изображения. Конечное резервное значение должно быть предопределенным значением (Смотрите список выше).

x, y

Значение (x,y) это координаты не обязательны. Они являются неотрицательными числами и меньше 32.

Например:

custom-cursor-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS cursor</title>
      <meta charset="UTF-8"/>
      <style>

          .my-div {
            height: 150px;
            width: 300px;
            padding: 5px;
            border: 1px solid gray;
            cursor: url('../images/my-cursor.png'), pointer;
          }
      </style>
   </head>
   <body>
       <h4>CSS Custom cursor</h4>

       <div>
          Move the cursor over me!
       </div>

   </body>
</html>

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

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

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

Эта статья поможет вам контролировать, какими способами может курсор в CSS помочь в вопросе улучшения пользовательского восприятия.

Представим вам следующие методы контролирования курсора:

  • Как сделать курсор в виде руки при наведении мыши на элемент списка
  • Как изменить курсор гиперссылки при наведении мыши
  • Как установить изображение для курсора
  • Пример со всеми видами маркеров

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

Если хотите изменить указатель мыши, чтобы он стал в форме руки при наведении мыши на элемент списка, можно установить класс для элемента списка (<li>) и установить стиль только для него. Но если необходимо установить указатель в форме руки для всех элементов списка, просто установите стиль для элемента <li>.

Код будет иметь следующий вид, если хотите установить курсор в виде указателя:

Давайте рассмотрим пример вышеуказанного метода:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      li{
      margin-bottom:15px;
      }
      li.pointer {
      cursor: pointer;
      }
      li:hover {
      background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h5>Наведите курсор мыши на элемент списка и увидите, как меняется курсор по умолчанию в указатель:</h5>
    <ul>
      <li>Элемент списка 1 с курсором по умолчанию.</li>
      <li>Элемент списка 2 с курсором-указателем по умолчанию.</li>
      <li>Элемент списка с с курсором по умолчанию.</li>
    </ul>
  </body>
</html>

Попробуйте сами!

Другой пример, где меняется курсор-указатель. Здесь мы используем селектор :nth-child вместе с nth-child(odd) как cursor: progress и nth-child(even) как cursor: pointer для отдельных типов курсора на разных элементах.

Пример¶

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      li:nth-child(odd) { 
      background: #1c87c9; 
      cursor: progress; 
      width: 50%; 
      padding: 5px; 
      } 
      li:nth-child(even) { 
      background: #ccc; 
      cursor: pointer; 
      width: 50%; 
      padding: 5px; 
      } 
    </style>
  </head>
  <body>
    <p>Наведите курсор мыши на элементы, чтобы увидеть как меняется курсор:</p>
    <ul>
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
      <li>Элемент списка 3</li>
      <li>Элемент списка 4</li>
      <li>Элемент списка 5</li>
      <li>Элемент списка 6</li>
      <li>Элемент списка 7</li>
    </ul>
  </body>
</html>

Попробуйте сами!

Известно, что курсор по умолчанию для гиперссылки устанавливается как «pointer». Если хотите изменить его, нужно указать тип курсора для элемента <a> с помощью CSS селектора :hover.

Чтобы изменить «pointer» в «default», вам понадобится эта часть кода:

a:hover {
cursor: default;
}

Смотрите следующий пример:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .link:hover {
      cursor: default;
      }
    </style>
  </head>
  <body>
    <h5>Наведите курсор мыши на гиперссылку и увидите, как "pointer" меняется в "default":</h5>
    <p><a href="https://www.w3docs.com">W3docs</a> ссылка с исходным видом "pointer".</p>
    <p><a href="https://www.w3docs.com">W3docs</a>ссылка с измененным курсором "default".</p>
  </body>
</html>

Попробуйте сами!

Так как ссылки имеют color: blue и text-decoration: underline по умолчанию, рекомендуется изменить цвет и продолжить работу с гиперссылками.

Смотрите статью Как изменить цвет ссылки с помощью CSS.

Как установить изображение для курсора¶

Давайте научимся, как еще можно работать с курсором! Можно также установить выбранное вами изображение как курсор на вашей веб-странице.

После этой части кода установите свойство cursor как image:

.mycursor {
cursor: url("myimage.png"), pointer;	
}

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

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

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background: #eee;
      text-align: center;
      }
      button {
      display: inline-block;
      background-color: #1c87c9;
      color: #eee;
      margin: 25px;
      position: relative;
      width: 140px;
      height: 45px;
      border-radius: 3px;
      border: none;
      font-size: 1.5em;
      text-align: center;
      text-decoration: none;
      box-shadow: 0 2px 8px 0 #999;
      }
      button:hover {
      background-color: #999;
      color: #ffcc00;
      }
      #happy {
      cursor: url("/uploads/media/default/0001/02/ee4486d1b3fc998e444c3b0100c73db282760eb5.png"), auto;
      }
      #sad {
      cursor: url("/uploads/media/default/0001/02/38cb87a27305100311d9c96e5a5ebb88f04d8034.png"), auto;
      }
      #love {
      cursor: url("/uploads/media/default/0001/02/4be757cf6e9ffc865861649ca423654484ad3dc1.png"), auto;
      }
    </style>
  </head>
  <body>
    <h3>Какое у вас впечатление от нашей веб-страницы?</h3>
    <button>Радостное</button>
    <button>Грустное</button>
    <button>Влюбленное</button>
  </body>
</html>

Попробуйте сами!

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

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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("/uploads/media/default/0001/02/53f34c2d574ce31a424df7855ef3e8f2ece589d6.png"), auto;
      }
      .cactus {	
      cursor: url("/uploads/media/default/0001/02/ea8020fd3fdb96affa77c8164f80d88f8c419e0f.png"), auto;
      }
      .nature {	
      cursor: url("/uploads/media/default/0001/02/edcafd9e202ae5f2ae6ae839d21d1d642b2ace00.png"), auto;	
      }
      .house {
      cursor:
      url("/uploads/media/default/0001/02/bb6f118f3b06838624b4297992457093f40fd92b.png"), auto;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/02/fc16e475b5cefcbe57924b1a4a3b3e38e936b77c.png" alt="cactus">
    <img src="/uploads/media/default/0001/02/2a85e41725d19aeae7066836accaababd42e638d.png" alt="nature">
    <img src="/uploads/media/default/0001/02/23df99002f94be0d1ca915058e2216c756be155e.png" alt="dog">
    <img src="/uploads/media/default/0001/02/1492763b186dabd60c4fbad49ce6d4ba3925b712.png" alt="house">
  </body>
</html>

Попробуйте сами!

Пример со всеми видами курсора¶

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

Для значений «zoom-in», «zoom-out», «grab» и «grabbing» добавляется расширение -webkit-.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      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; }
    </style>
  </head>
  <body>
    <h3>Пример свойства cursor</h3>
    <p> Наведите курсор мыши на элемент и увидите изменения:</p>
    <div>
      <div>auto</div>
      <div>default</div>
      <div>none</div>
      <div>context-menu</div>
      <div>help</div>
      <div>pointer</div>
      <div>progress</div>
      <div>wait</div>
      <div>cell</div>
      <div>crosshair</div>
      <div>text</div>
      <div>vertical-text</div>
      <div>alias</div>
      <div>copy</div>
      <div>move</div>
      <div>no-drop</div>
      <div>not-allowed</div>
      <div>all-scroll</div>
      <div>col-resize</div>
      <div>row-resize</div>
      <div>n-resize</div>
      <div>s-resize</div>
      <div>e-resize</div>
      <div>w-resize</div>
      <div>ns-resize</div>
      <div>ew-resize</div>
      <div>ne-resize</div>
      <div>nw-resize</div>
      <div>se-resize</div>
      <div>sw-resize</div>
      <div>nesw-resize</div>
      <div>nwse-resize</div>
      <div>grab</div>
      <div>grabbing</div>
      <div>zoom-in</div>
      <div>zoom-out</div>
    </div>
  </body>
</html>

Попробуйте сами!

CSS свойство cursor

Определяет вид курсора при наведении мышки на элемент. Вид курсора зависит от операционной системы и установленных параметров.

CSS синтаксис

cursor: значение;

Возможные значения

ЗначениеОписание
autoЗначение по умолчанию. Форму курсора определяет браузер.
crosshairКурсор в виде большого знака «+».
defaultСистемный курсор.
helpКурсор, показывающий наличие справочной информации.
moveИспользуется для указания чего-то, что может быть перемещено.
n-resizeИспользуется для указания чего-то, чей размер может быть растянут вверх.
ne-resizeИспользуется для указания чего-то, чей размер может быть растянут вверх и вправо.
e-resizeИспользуется для указания чего-то, чей размер может быть растянут вправо.
se-resizeИспользуется для указания чего-то, чей размер может быть растянут вниз и вправо.
s-resizeИспользуется для указания чего-то, чей размер может быть растянут вниз.
sw-resizeИспользуется для указания чего-то, чей размер может быть растянут вниз и влево.
w-resizeИспользуется для указания чего-то, чей размер может быть растянут влево.
nw-resizeИспользуется для указания чего-то, чей размер может быть растянут вверх и влево.
textТекстовый курсор.
pointerКурсор-указатель.
progressКурсор-ожидание, показывающий, что программа работает, но процесс может быть прерван.
waitКурсор-ожидание, показывающий, что следует дождаться окончания работы программы.
URLСписок разделенных запятыми URLов к пользовательским курсорам. Указывается путь к файлу курсора, который должен быть в формате CUR или ANI. В конце списка всегда следует указывать какой-нибудь базовый курсор на случай, если пользовательские курсоры будут недоступны.
initialУстанавливает значение по умолчанию.
inheritЗначение наследуется от родительского элемента.

Пример использования

Устанавливаем разные виды курсора


span.crosshair {
    cursor: crosshair;
}

 span.help {
    cursor: help;
}

 span.wait {
    cursor: wait;
}

Почему эффект «cursor:pointer» в CSS не работает

HTML:

     <div>
          <div>
              <h2>YOU CHIA LAI</h2>
                  <ul>
                      <li>I am a Master of <span>Architecture</span>  
                       candidate at Rice University.  
                      </li>
                      <li>I am also interested in <span>photography</span> &        
                      <span>web design</span>.</li>
                      <li>I wish you can know more <span>about</span> me.
                      </li>
                 </ul>
          </div>
      </div>

CSS:

#firstdiv{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:100%;
    width:100%;
    margin:auto;
    background:#E6E6E6;
    text-align:center;
    font-size:0;
    z-index:-2
}
.about>span{
    cursor:pointer;
    font-family:Eurofurence Light;
    padding:0 0 3px 0;
    color:#01DFA5;
}

это небольшая часть моего кода. Я установил cursor:pointer для .about>span , но когда мышь наводится на эти тексты в <span>, курсор не переходит в режим указателя. Я хотел бы знать, почему это не работает. Я действительно Новичок в html и css, и этот вопрос может быть глупым, но, пожалуйста, помогите мне. Заранее спасибо.

html

css

Поделиться

Источник


You Chia Lai    

25 августа 2013 в 23:07

13 ответов

  • CSS Sprite для кнопки отправки не работает (в Rails 3)

    У меня возникли проблемы с тем, чтобы мой эффект CSS sprite работал в моем приложении rails, не знаю почему, потому что я не совсем понимаю эту концепцию. Вот мой код кнопки отправки: <%= f.submit », :class => ‘submitpost’%> и CSS за ним: .submitpost { border: none; height: 40px; width:…

  • CSS li a ‘cursor:pointer’ не работает в div

    Внутри небольшого контейнера <div> , который находится внутри большего контейнера, я хочу поместить ссылки <a> в виде тегов <li> . Когда я помещаю cursor:pointer в свой CSS, состояние наведения не отображает руку, и мои ссылки не включены. CSS .black_box_contain li{…


343

Я часами возился со своим css, меняя расположение и z-индекс почти каждого элемента на странице. Я удалил все остальные элементы из DOM, за исключением элемента с курсором: указатель при наведении, и он STILL не работал.

Для меня в Mac OSX El Captain V 10.11 проблема была связана с каким-то вмешательством в Photoshop CC. Как только я закрыл photoshop, курсор снова начал работать.

Решение для меня: Закройте и снова откройте photoshop

Поделиться


ThinkingInBits    

04 февраля 2016 в 21:52


100

Короткий ответ заключается в том, что вам нужно изменить z-индекс так, чтобы #firstdiv считался поверх других divs.

Поделиться


Sj.    

25 августа 2013 в 23:13


35

cursor:pointer не работает, когда вы используете мобильный эмулятор Chrome.

Поделиться


0xcaff    

13 июня 2017 в 00:00

  • css эффект перехода за границы

    привет всем я использую эффект перехода css3 здесь я пытаюсь использовать его для стиля границы my css .round{ width:50px; height:50px; border-radius:50px; border:5px solid #ccc; cursor:pointer; background-color:#f00; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease;…

  • Jquery отключает эффект наведения css

    Я закодировал небольшое меню, в котором при наведении мыши меняется цвет поля, над которым находится мышь. В дальнейшем я меняю css onclick на jquery. Однако css hover-effect i в дальнейшем не работает. Я бы хотел, чтобы эффект наведения был активен после щелчка. Код: (см. jfiddle:…


24

Просто случилось со мной, и в моем случае это было связано с правилом CSS pointer-events: none; , которое было установлено на родительском элементе, и я забыл об этом.

Это привело к тому, что любые события указателя просто игнорировались, включая курсор.

Чтобы исправить это, вы можете просто установить стиль, разрешающий события указателя:

.about>span{
    cursor:pointer;
    pointer-events: auto;
}

Или непосредственно в элементе:

<span>...</span>

Поделиться


Shadow Wizard is Vaccinating    

03 мая 2017 в 12:28


7

Также добавьте cursor:hand. Некоторые браузеры нуждаются в этом вместо этого.

Поделиться


h3ONOCK    

25 августа 2013 в 23:14


2

Это работает, если вы удалите position:fixed из #firstdiv , но @Sj, вероятно, также прав — скорее всего, проблема с наслоением z-индекса.

Поделиться


Brad Peabody    

25 августа 2013 в 23:15


2

У меня была эта проблема с использованием Angular и SCSS. У меня был весь мой CSS вложенный, поэтому я решил удалить из него cursor: pointer; . И это сработало.

Пример:

.container{
  .Approved{
    color:green;
  }

  .ApprovedAndVerified{
    color:black;
  }

  .lock_button{
    font-size:35px;
    display:block;
    text-align:center;
  }
}

.lock_button{
  cursor:pointer;
}

Поделиться


JuZDePeche    

19 марта 2019 в 16:21


1

У меня такая же проблема, когда я закрываю окно Chrome popup browser inspector, он работает нормально для меня.

Поделиться


Rijo    

11 октября 2019 в 17:17


1

position: relative;
z-index: 2;
cursor: pointer

работал на меня.

Поделиться


Thomas    

08 февраля 2020 в 00:24


1

Решение, которое сработало для меня, — это использование прямой косой черты вместо обратной косой черты при выходе ‘calling’ из локального каталога.

вместо обратной косой черты:

cursor: url("C:\Users\Ken\projects\JavascriptGames\images\bird.png"), auto;

Примечание: когда я использую обратную косую черту, я получаю net::ERR_FILE_NOT_FOUND

Я изменил его на forwardslash:

cursor: url("C:/Users/Ken/projects/JavascriptGames/images/bird.png"), auto;

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

Такое поведение в отношении обратной косой черты и прямой косой черты, вероятно, может быть объяснено в этом ответе StackOverflow: странная обратная косая черта и поведение в CSS

Поделиться


Lan    

02 июня 2020 в 18:53


1

Последние несколько часов я ломал голову, почему мой CSS не работает! Я пытался показать row-resize как курсор, но он показывал курсор по умолчанию, а для браузера s-resize показывал правильный курсор. Я попытался изменить z-index , но это также не решило мою проблему.

Поэтому, попробовав еще несколько решений из интернета, я позвонил одному из своих коллег и поделился своим экраном через Google meet, и он сказал мне, что видит значок изменения размера строки, когда я вижу значок по умолчанию!!! Он даже прислал мне скриншот моего скринкаста.

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

Вот список курсоров, которые я не мог видеть на своем пульте дистанционного управления PC,

none, cell, crosshair, text, vertical-text, alias, copy, col-resize, row-resize,

Поделиться


MD KAMRUL HASAN SHAHED    

26 июня 2020 в 07:17


0

Проблема в моем случае заключалась в том, что :after блокировал события мыши, поэтому мне пришлось добавить pointer-events: none; в свой блок :after .

Поделиться


Lukas Owen    

16 августа 2019 в 10:11


-1

Расположите элемент как относительный, а затем используйте z-индекс, это сработало для меня 🙂

Поделиться


Ichigo Kurosaski    

26 июня 2019 в 05:33

Похожие вопросы:

CSS эффект наведения не работает после запуска функции jquery

Here is my css: .parentDiv { } .childDiv { height:40px; width:165px; color:#D6D6D6; text-align:left; cursor:pointer; font-size:.85em; font-weight:normal; border-top:1px solid #0F0F0F; }…

CSS hover не работает после выполнения функции KEYUP

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

CSS cursor:pointer в mac Safari не работает

Я поместил cursor:pointer на td, но в Safari (на mac) он отображает только курсор мыши по умолчанию, а не меняется на маленький указатель руки, как это происходит в любом другом браузере. Кто-нибудь…

CSS Sprite для кнопки отправки не работает (в Rails 3)

У меня возникли проблемы с тем, чтобы мой эффект CSS sprite работал в моем приложении rails, не знаю почему, потому что я не совсем понимаю эту концепцию. Вот мой код кнопки отправки: <%=…

CSS li a ‘cursor:pointer’ не работает в div

Внутри небольшого контейнера <div> , который находится внутри большего контейнера, я хочу поместить ссылки <a> в виде тегов <li> . Когда я помещаю cursor:pointer в свой CSS,…

css эффект перехода за границы

привет всем я использую эффект перехода css3 здесь я пытаюсь использовать его для стиля границы my css .round{ width:50px; height:50px; border-radius:50px; border:5px solid #ccc; cursor:pointer;…

Jquery отключает эффект наведения css

Я закодировал небольшое меню, в котором при наведении мыши меняется цвет поля, над которым находится мышь. В дальнейшем я меняю css onclick на jquery. Однако css hover-effect i в дальнейшем не…

Почему эффект наведения не работает в CSS?

Я установил эффект зависания в своем CSS, но, похоже, он не имеет никакого эффекта. Что я делаю не так? .button_link { display: inline-block; border: solid black 2px; border-radius: 15px;…

cursor:pointer не работает для <Link> в React

Я новичок реагировать и хотел добавить cursor:pointer на реагировать link маршрутизатор витать в реакцию. Я использую модули CSS и в основном сделал все правильно, но все равно указатель не…

Эффект наведения курсора на div и изображение не работает в css

у меня есть div, который содержит изображение [и изображение служит цели button]. Я хочу сделать div или img более удобным для пользователя . Для этого я пытаюсь создать границу при наведении…

cursor | Справочник CSS | schoolsw3.com

ЗначениеОписаниеВоспроизвести
aliasКурсор указывает на псевдоним чего-то, что должно быть созданоВоспроизвести »
all-scrollКурсор указывает, что что-то можно прокрутить в любом направленииВоспроизвести »
autoПо умолчанию. Браузер устанавливает курсорВоспроизвести »
cellКурсор указывает, что ячейка (или набор ячеек) может быть выбранаВоспроизвести »
context-menuКурсор указывает, что контекстное меню доступноВоспроизвести »
col-resizeКурсор указывает, что размер столбца можно изменить по горизонталиВоспроизвести »
copyКурсор указывает, что что-то должно быть скопированоВоспроизвести »
crosshairКурсор отображается в виде перекрестияВоспроизвести »
defaultКурсор по умолчаниюВоспроизвести »
e-resizeКурсор указывает, что край коробки должен быть перемещен вправо (на восток)Воспроизвести »
ew-resizeУказывает двунаправленный курсор изменения размераВоспроизвести »
grabКурсор указывает, что что-то можно схватитьВоспроизвести »
grabbingКурсор указывает, что что-то можно схватитьВоспроизвести »
helpКурсор указывает, что справка доступнаВоспроизвести »
moveКурсор указывает, что что-то должно быть перемещеноВоспроизвести »
n-resizeКурсор указывает, что край коробки должен быть перемещен вверх (на север)Воспроизвести »
ne-resizeКурсор указывает, что край коробки должен быть перемещен вверх и вправо (север/восток)Воспроизвести »
nesw-resizeУказывает двунаправленный курсор изменения размераВоспроизвести »
ns-resizeУказывает двунаправленный курсор изменения размераВоспроизвести »
nw-resizeКурсор указывает, что край коробки должен быть перемещен вверх и влево (север/запад)Воспроизвести »
nwse-resizeУказывает двунаправленный курсор изменения размераВоспроизвести »
no-dropКурсор указывает, что перетаскиваемый элемент не может быть отброшен сюдаВоспроизвести »
noneКурсор не отображается для элементаВоспроизвести »
not-allowedКурсор указывает, что запрошенное действие не будет выполненоВоспроизвести »
pointerКурсор является указателем и указывает на ссылкуВоспроизвести »
progressКурсор указывает, что программа занята (выполняется)Воспроизвести »
row-resizeКурсор указывает, что размер строки можно изменить по вертикалиВоспроизвести »
s-resizeКурсор указывает, что край коробки должен быть перемещен вниз (на юг)Воспроизвести »
se-resizeКурсор указывает, что край коробки должен быть перемещен вниз и вправо (юг/восток)Воспроизвести »
sw-resizeКурсор указывает, что край коробки должен быть перемещен вниз и влево (юг/запад)Воспроизвести »
textКурсор указывает на текст, который может быть выделенВоспроизвести »
URLРазделенный запятыми список URL-адресов пользовательских курсоров. Примечание: Всегда указывайте общий курсор в конце списка, если ни один из определенных URL курсоров не может быть использованВоспроизвести »
vertical-textКурсор указывает на вертикальный текст, который может быть выбранВоспроизвести »
w-resizeКурсор указывает, что край коробки должен быть перемещен влево (на запад)Воспроизвести »
waitКурсор указывает, что программа занятаВоспроизвести »
zoom-inКурсор указывает, что что-то можно увеличитВоспроизвести »
zoom-outКурсор указывает, что что-то можно уменьшитьВоспроизвести »
initialУстанавливает для этого свойства значение по умолчанию. Прочитать о initialВоспроизвести »
inheritНаследует это свойство от родительского элемента. Прочитать о inherit

Курсор

— CSS: каскадные таблицы стилей

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

 
курсор: указатель;
курсор: авто;


курсор: url (hand.cur), указатель;


курсор: url (cursor1.png) 4 12, авто;
курсор: url (cursor2.png) 2 2, указатель;


курсор: наследовать;
курсор: начальный;
курсор: вернуться;
курсор: не установлен;

Свойство курсора указано как ноль или более значений, разделенных запятыми, за которыми следует одно обязательное значение ключевого слова.Каждый должен указывать на файл изображения. Браузер попытается загрузить первое указанное изображение, вернувшись к следующему, если не может, и вернется к значению ключевого слова, если изображения не могут быть загружены (или если ни одно из них не было указано).

За каждым необязательно может следовать пара чисел, разделенных пробелами, которые представляют координат. Они установят точку доступа курсора относительно левого верхнего угла изображения.

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

  курсор: url (one.svg), url (two.svg) 5 5, прогресс;

Значения

url ​​(…) или список, разделенный запятыми url ​​(…), url (…),… , указывающий на файл изображения.Более одного URL-адреса () могут быть предоставлены в качестве резервных вариантов на случай, если некоторые типы изображений курсора не поддерживаются. Резервный вариант без URL (одно или несколько значений ключевого слова) должен находиться в конце списка резервных копий. Дополнительные сведения см. В разделе «Использование значений URL-адреса для свойства курсора».
Необязательные координаты x и y. Два безразмерных неотрицательных числа меньше 32.
Значения ключевого слова

Наведите указатель мыши на значения, чтобы увидеть их отображение в реальном времени в браузере:

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

Проверьте таблицу совместимости браузеров на предмет примечаний об ограничениях размера курсора.

 [[ [ ]? ,] * [авто | по умолчанию | нет | контекстное меню | помощь | указатель | прогресс | подождите | ячейка | перекрестие | текст | вертикальный текст | псевдоним | копия | двигаться | без капель | не разрешено | электронное изменение размера | n-изменить размер | изменить размер | nw-resize | s-resize | изменить размер | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | изменение размера строки | прокрутка | увеличение | уменьшение | схватить | захват]]

Установка типов курсора 

 .foo {
  курсор: перекрестие;
}

.бар {
  курсор: увеличение;
}


.baz {
  курсор: url ("hyper.cur"), авто;
}

Таблицы BCD загружаются только в браузере

Свойство курсора CSS

Пример

CSS может генерировать несколько разных курсоров мыши:

.alias {курсор: псевдоним;}
.all-scroll {cursor: all-scroll;}
.auto
{cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor:
контекстное меню;}
.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 {курсор:
ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {курсор:
ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not- допустимый
{cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor:
progress;}
.row-resize {cursor: row-resize;}
.s-resize {курсор:
s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url (myBall. cur), auto;}
.w-resize
{курсор: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}

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

Определение и использование

Свойство курсора определяет курсор мыши, который будет отображаться при наведении курсора на элемент.

Значение по умолчанию: авто
Унаследовано: да
Анимация: нет. Прочитать о animatable
Версия: CSS2
Синтаксис JavaScript: объект .style.cursor = «прицел»
Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Имущество
курсор 5,0 5,5 4,0 5,0 9,6

Синтаксис CSS

Значения свойств

Значение Описание Играй
псевдоним Курсор указывает, что необходимо создать псевдоним Играй »
all-scroll Курсор указывает на то, что что-то можно прокручивать в любом направлении Играй »
авто По умолчанию.Браузер устанавливает курсор Играй »
ячейка Курсор указывает, что ячейка (или набор ячеек) может быть выбрана Играй »
контекстное меню Курсор указывает, что контекстное меню доступно Играй »
col-resize Курсор указывает, что размер столбца можно изменять по горизонтали Играй »
копия Курсор указывает, что что-то нужно скопировать Играй »
перекрестие Курсор отображается как перекрестие Играй »
по умолчанию Курсор по умолчанию Играй »
Изменить размер Курсор указывает, что край прямоугольника необходимо переместить вправо (на восток) Играй »
изменить размер ew Обозначает двунаправленный курсор изменения размера Играй »
захват Курсор указывает, что что-то можно схватить Играй »
захват Курсор указывает, что что-то можно схватить Играй »
справка Курсор указывает на доступность справки Играй »
переместить Курсор указывает на то, что что-то нужно переместить Играй »
изменить размер n Курсор указывает, что край прямоугольника необходимо переместить вверх (на север) Играй »
изменить размер Курсор указывает на то, что край прямоугольника необходимо переместить вверх и вправо (север / восток) Играй »
изменить размер Обозначает двунаправленный курсор изменения размера Играй »
нс изменить размер Обозначает двунаправленный курсор изменения размера Играй »
изменить размер nw Курсор указывает на то, что край прямоугольника необходимо переместить вверх и влево (север / запад) Играй »
изменить размер nwse Обозначает двунаправленный курсор изменения размера Играй »
без сброса Курсор указывает, что перетаскиваемый элемент не может быть здесь удален Играй »
нет Для элемента не отображается курсор Играй »
не допускается Курсор указывает, что запрошенное действие не будет выполнено Играй »
указатель Курсор является указателем и указывает ссылку Играй »
прогресс Курсор указывает, что программа занята (выполняется) Играй »
изменение размера строки Курсор указывает, что размер строки можно изменять по вертикали Играй »
изменить размер Курсор указывает на то, что край прямоугольника необходимо переместить вниз (на юг) Играй »
изменить размер Курсор указывает на то, что край прямоугольника необходимо переместить вниз и вправо (юг / восток) Играй »
sw — изменение размера Курсор указывает на то, что край прямоугольника нужно переместить вниз и влево (юг / запад) Играй »
текст Курсор указывает текст, который можно выбрать Играй »
URL Список URL-адресов пользовательских курсоров, разделенных запятыми. Примечание. Всегда указывайте универсальный курсор в конце списка на случай, если ни один из курсоров, определенных для URL, не может быть использован Играй »
вертикальный текст Курсор указывает вертикальный текст, который можно выбрать Играй »
w-изменение размера Курсор указывает на то, что край прямоугольника следует переместить влево (на запад) Играй »
подождите Курсор указывает, что программа занята Играй »
увеличение Курсор указывает, что что-то можно увеличить Играй »
уменьшение Курсор указывает на то, что что-то можно уменьшить Играй »
начальный Устанавливает для этого свойства значение по умолчанию.Читать о начальная Играй »
унаследовать Наследует это свойство от своего родительского элемента. Читать про наследство

связанные страницы

Ссылка на HTML DOM: свойство курсора

Как создать собственный курсор с помощью CSS

Свойство курсора CSS, используемое для определения типа курсора (т.е.е. указатель мыши), когда мышь перемещается по определенной области или по ссылке на веб-странице.

Изменение внешнего вида курсора

Браузеры обычно отображают указатель мыши над любой пустой частью веб-страницы, руку в перчатке над любым связанным или интерактивным элементом, а курсор редактирования над любым текстовым или текстовым полем. С помощью CSS вы можете переопределить эти свойства для отображения множества различных курсоров.

  h2 {
    курсор: двигаться;
}
п {
    курсор: текст;
}

В таблице ниже показаны различные курсоры, которые поддерживаются большинством браузеров.Наведите указатель мыши на ссылку «ТЕСТ» в выходном столбце, чтобы открыть этот курсор.

Другие курсоры »

Создание индивидуального курсора

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

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

Если ни один из определяемых пользователем курсоров не является действительным или не поддерживается браузером, вместо него будет использоваться общий курсор в конце списка.

Совет: Стандартный формат, который можно использовать для курсоров, — это формат .cur . Однако вы можете преобразовать изображения, такие как .jpg и .gif , в .cur с помощью программы-конвертера изображений, которая находится в свободном доступе в Интернете.

  а {
    курсор: url ("custom.gif"), url ("custom.cur"), по умолчанию;
}

В приведенном выше примере custom.gif и custom.cur — это файл пользовательского курсора, загруженный в пространство вашего сервера, а по умолчанию — это общий курсор, который будет использоваться, если пользовательский курсор отсутствует или не поддерживается браузером средства просмотра.

Предупреждение: Если вы объявляете пользовательский курсор, вы должны определить общий курсор в конце списка, иначе пользовательский курсор не будет отображаться правильно.

Вот живая демонстрация настраиваемого курсора.

Примечание. IE9 и более ранние версии поддерживают только значения URL-адресов типа .cur для статического курсора и .ani для анимированного курсора. Однако такие браузеры, как Firefox, Chrome и Safari, поддерживают .cur , .png , .gif и .jpg , но не .ani .

CSS-курсор Свойство

Синтаксис селектор {курсор: URI , URI , значение ;}

  • Значения URI являются ДОПОЛНИТЕЛЬНЫМИ и могут встречаться 0 или более раз с запятой после каждого URI .Выше приведен образец идентификатора URI , встречающегося дважды.

    • Значение

  • задается одним из следующих ключевых слов: auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize. , w-изменение размера, текст, подождите, справка, или , прогресс .

(ИЛИ)

селектор {курсор: значение ;}

    Значение

  • указывается с помощью ключевого слова inherit .
 Использование

Свойство курсора используется для указания изображения курсора для мыши или другого указывающего устройства при наведении курсора на элемент.

Это свойство задается с использованием нуля или более значений URI , за которыми следует ключевое слово , в соответствии с синтаксисом, показанным выше. Если указано одно или несколько значений URI , то первым будет проверяться первый URI .Если первый URI не может быть использован, будет использован второй URI и так далее. Если нельзя использовать ни одно из значений URI , тогда курсор будет установлен на указанное ключевое слово . Примечание. Значения курсора URI могут не поддерживаться некоторыми браузерами.

CSS Пример: свойство курсора устанавливается с помощью ключевого слова.

 h2 {курсор: указатель;}
Ключевые слова

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

  • авто
  • перекрестие
  • по умолчанию
  • указатель
  • переезд
  • Изменить размер
  • изменить размер
  • изменить размер nw
  • изменить размер n
  • изменить размер
  • SW-изменение размера
  • s-изменение размера
  • w-изменение размера
  • текст
  • ждать
  • справка
  • прогресс
  • inherit — одно ключевое слово inherit используется для указания того, что значения этого свойства должны быть взяты из родительского элемента.Если inherit используется с корневым элементом, то будут использоваться начальные значения для этого свойства. Когда используется ключевое слово inherit , другие значения свойств не допускаются.

Примечание. Примеры курсора, показанные выше, могут не отображаться одинаково во всех браузерах и / или операционных системах.

Cursor — Tailwind CSS

Auto

Используйте cursor-auto , чтобы позволить браузеру изменять курсор в зависимости от текущего содержимого (например,г. автоматически изменится на текст курсора при наведении курсора на текст).

  

  Наведите курсор на этот текст

По умолчанию

Используйте cursor-default , чтобы изменить курсор мыши, чтобы всегда использовать курсор по умолчанию, зависящий от платформы (обычно стрелку).

  

  Наведите курсор на этот текст

Указатель

Используйте указатель-указатель , чтобы изменить курсор мыши, чтобы указать интерактивный элемент (обычно указывающую руку).

  

  Наведи меня

Wait

Используйте cursor-wait , чтобы изменить курсор мыши, чтобы указать, что что-то происходит в фоновом режиме (обычно это песочные часы или часы).

  

  Наведи меня

Текст

Используйте cursor-text , чтобы изменить курсор мыши, чтобы указать, что текст может быть выбран (обычно это двутавровая форма).

  

  Наведи меня

Move

Используйте cursor-move , чтобы изменить курсор мыши, чтобы указать то, что можно перемещать.

  

  Наведи меня

Not Allowed

Используйте cursor-not-allowed , чтобы изменить курсор мыши, чтобы указать, что с чем-то нельзя взаимодействовать или щелкать.

  

  Наведи меня

Настройка

курсоров

По умолчанию Tailwind предоставляет шесть утилит cursor . Вы изменяете, добавляете или удаляете их, редактируя раздел theme.cursor в вашей конфигурации Tailwind.

 
  module.exports = {
    тема: {
      курсор: {
        авто: 'авто',
        по умолчанию: 'по умолчанию',
        указатель: 'указатель',
-       Подожди подожди',
        текст: 'текст',
- move: 'двигаться',
        'not-allowed': 'not-allowed',
+ перекрестие: 'перекрестие',
+ 'увеличение': 'увеличение',
      }
    }
  }

Варианты

По умолчанию для утилит курсора генерируются только адаптивные варианты.

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

Например, эта конфигурация также будет генерировать варианты наведения и фокусировки:

 
  module.exports = {
    варианты: {
      продлевать: {
        
+ курсор: ['hover', 'focus'],
      }
    }
  }

Если вы не планируете использовать утилиты курсора в своем проекте, вы можете полностью отключить их, установив для свойства cursor значение false в разделе corePlugins вашего файла конфигурации:

 
  модуль.export = {
    corePlugins: {
      
+ курсор: ложь,
    }
  }

курсор — Ссылка CSS


Закрыть

CSS Ссылка бесплатно и всегда будет!

Добавьте нас в белый список блокировщика рекламы.

Спасибо!

Бесплатное визуальное руководство по CSS Создано @jgthms

Поделиться

Меню

Новинка! Моя 44-страничная электронная книга « CSS за 44 минуты » вышла! 😃

Получить сейчас →

Постоянная ссылка
Делиться
MDN

Устанавливает курсор мыши при наведении курсора на элемент.

курсор: по умолчанию;

Устанавливает курсор на значение элемента по умолчанию. Для ссылки это будет указатель. Для текста это будет курсор выбора.

]]]]]]]]>]]]]]]]>]]]]>]]>

курсор: авто;

]]]]]]]]>]]]]]]]>]]]]>]]>

курсор: указатель;

]]]]]]]]>]]]]]]]>]]]]>]]>

курсор: переместить;

]]]]]]]]>]]]]]]]>]]]]>]]>

курсор: перекрестие;

]]]]]]]]>]]]]]]]>]]]]>]]>

курсор: текст;

]]]]]]]]>]]]]]]]>]]]]>]]>

курсор: подождите;

]]]]]]]]>]]]]]]]>]]]]>]]>

курсор: помощь-изменение размера;

]]]]]]]]>]]]]]]]>]]]]>]]>

курсор: изменить размер;

]]]]]]]]>]]]]]]]>]]]]>]]>

курсор: изменение размера nw;

]]]]]]]]>]]]]]]]>]]]]>]]>

курсор: изменение размера n;

]]]]]]]]>]]]]]]]>]]]]>]]>

курсор: изменить размер;

]]]]]]]]>]]]]]]]>]]]]>]]>

курсор: sw-resize;

]]]]]]]]>]]]]]]]>]]]]>]]>

курсор: изменение размера s;

]]]]]]]]>]]]]]]]>]]]]>]]>

курсор: w-изменение размера;

]]]]]]]]>]]]]]]]>]]]]>]]>
]]]]]]]]>]]]]]]]>]]]]>]]>

CSS2 — стили курсора

CSS2 — стили курсора

Стили курсора

Вернуться к оглавлению.

Эта страница переведена на итальянский.

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

Крайние левые ячейки таблицы совместимости имеют указанное значение курсора .Также
W3C и
Ссылки Microsoft.

псевдоним

 № Есть Есть Есть Есть Есть Есть

all-scroll

 Есть Есть Есть Есть Есть Есть

ячейка

 № Есть Есть Есть Есть Есть Есть

col-resize

 Есть Есть Есть Есть Есть Есть

контекстное меню

 № Есть № Есть Есть № Есть № Есть №

копия

 № Есть Есть Есть Есть Есть Есть

прицел

 Есть Есть Есть Есть Есть Есть

по умолчанию

 Есть Есть Есть Есть Есть Есть

рука

 Есть № № № № № №

См. Примечание ниже.

справка

 Есть Есть Есть Есть Есть Есть

ход

 Есть Есть Есть Есть Есть Есть

без сброса

 Есть Есть Есть Есть Есть Есть

нет

 № Есть Есть Есть Есть Есть Есть

не допускается

 Есть Есть Есть Есть Есть Есть

указатель

 Есть Есть Есть Есть Есть Есть

См. Примечание ниже.

прогресс

 Есть Есть Есть Есть Есть Есть

изменение размера строки

 Есть Есть Есть Есть Есть Есть

текст

 Есть Есть Есть Есть Есть Есть

url

 № Почти Есть Есть Есть Есть

Использовать изображение в формате gif в качестве курсора:

Синтаксис: курсор: URL (../pix/cursor_ppk.gif),auto . auto требуется как резервный; URL-адрес не будет работать без него. (Не спрашивайте почему.)

См. Примечание ниже.

  • В этом тесте Firefox обнаружил ошибку: хотя я определил курсор для всего TD, Firefox показывает его только тогда, когда я наводил курсор на DIV внутри TD.

url

 Есть Почти Есть Есть Есть Есть

Использовать текущее изображение в качестве курсора:

Синтаксис: курсор: URL (../pix/cursor_ppk.cur),auto . auto требуется как резервный; URL-адрес не будет работать без него. (Не спрашивайте почему.)

Я слышал, но не проверял, что URL-адрес курсора должен быть относительно страницы ,
а не в таблицу стилей, в IE как минимум до 9.

См. Примечание ниже.

  • В этом тесте Firefox обнаружил ошибку: хотя я определил курсор для всего TD, Firefox показывает его только тогда, когда я наводил курсор на DIV внутри TD.

вертикальный текст

 Есть Есть Есть Есть Есть Есть

ждать

 Есть Есть Есть Есть Есть Есть

* -размер

 Есть Есть Есть Есть Есть Есть

Пример: «Изменение размера N».Вместо «N» вы также можете
используйте ‘NW’, ‘W’, ‘SW’, ‘S’, ‘SE’, ‘E’, ‘NE’

увеличение

 № Есть Есть Есть Есть Есть Есть

уменьшение

 № Есть Есть Есть Есть Есть Есть

Протестированные браузеры

IE 8, 9 и 10
В отдельных виртуализациях Windows 7, загруженных из Modern IE.
IE11
В виртуализации Windows 8.1, загруженной из современного IE.
Край 13
On Surface Book с Windows 10.
Firefox 47
47.0.1 на Win10 и Mac
Safari 9.1.1
9.1.1 на Mac
Хром 51
51 на Win10 и Mac
Opera 38
38 на Win10 и Mac
UC 5.6
5.6 в Windows 7
Операционные системы
Mac
Mac Mini с ОС 10.11,15
Это моя основная тестовая станция. Он также работает со всеми виртуальными системами Windows.
Windows 7 и 8.1
Все скачал с модерна. Я использую Parallels и загрузил системы Windows 7 для всех браузеров, кроме IE11, который работает в Windows 8.1.
Windows 10
Microsoft Surface Book с Windows 10
Записка на

указателя и рука

Раньше hand было способом Microsoft сказать указатель ; и
IE 5.0 и 5.5 поддерживают только и . Поскольку чаще всего используется значение курсора,
большинство других браузеров также реализовали hand .

Поскольку IE 6 и 7 поддерживают указатель , больше нет причин использовать hand ,
кроме случаев, когда старые IE являются частью вашей целевой аудитории. В этом случае единственный кроссбраузерный синтаксис
это:

element {
курсор: указатель;
курсор: рука;
}

Обратите внимание, что два объявления должны располагаться в следующем порядке: .

Примечание к URL-адресам

IE / Edge требует CUR, в то время как всем остальным браузерам нужен GIF. К счастью, их можно комбинировать.

element {
курсор: url (../ pix / cursor_ppk.gif), авто;
курсор: url (../ pix / cursor_ppk.cur), авто;
}

Обратите внимание, что два объявления должны располагаться в следующем порядке: .

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *