Hand css cursor: css — How to change the cursor into a hand when a user hovers over a list item?

html — меняет курсор на руку, когда мышь перемещается по строке в таблице

спросил 11 лет, 2 месяца назад

Изменено 5 месяцев назад

Просмотрено 506 тысяч раз

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

 <стиль границы таблицы:>
  

• html
• css
• курсор мыши

1

На самом деле вы можете сделать это с помощью CSS.

 .sortable tr {
    курсор: указатель;
}
 

0

Я немного поискал стили начальной загрузки и нашел это:

 [role=button]{cursor:pointer}
 

Итак, я предполагаю, что вы можете получить то, что хотите, с помощью:

 hi
 

4

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

 style="cursor: pointer;"
 

к вашим тегам.

0

Добавить курсор : указатель на ваш css.

Я добавил это в свой style.css для управления параметрами курсора:

 .cursor-pointer {cursor: pointer;}
.cursor-crosshair {курсор: перекрестие;}
.cursor-eresize {курсор: e-resize;}
.cursor-move {курсор: двигаться;}
 

0

Использовать стиль курсора : указатель; в CSS для элемента, на котором вы хотите изменить курсор.

В вашем случае вы должны использовать (в вашем файле .css):

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

Для совместимости с IE < 6 используйте этот стиль в следующем порядке:

 .sortable:hover {
    курсор: указатель;
    курсор: рука;
}
 

Но помните, что IE < 7 поддерживает псевдокласс :hover только с элементом .

Пример со встроенными стилями:

 
 Конечно, вы должны поместить стиль в свой файл CSS и применить его к классу.
 
 Использование css
 table tr:hover{cursor:pointer;} /* Для всех таблиц*/
table.sortable tr:hover{cursor:pointer;} /* только для этого */
 
 только для стандарта, вышеперечисленные решения работают, но если вы используете таблицы данных, вам необходимо переопределить настройки datatatables.css по умолчанию и добавить следующий код в пользовательский css. В приведенном ниже коде row-select — это класс, который я добавил на datatables, как показано в html.
 table.row-select.dataTable tbody td
{
курсор: указатель;
}
 
 И ваш html будет выглядеть следующим образом:
 

  

    
Имя
Возраст
  
  
Дженнифер
24
  
Кейт
36
  
Дэвид
25
  
Отметка
40

 

 

  bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
Пример кнопки 

 Кнопка элемента без кнопки
 

 сводка {
  отображение: элемент списка;
  курсор: указатель;
}
.btn: не (: отключено): не (. отключено) {
  курсор: указатель;
}
.custom-range::-webkit-slider-runnable-track {
  ширина: 100%;
  высота: 0,5бэр;
  цвет: прозрачный;
  курсор: указатель;
  цвет фона: #dee2e6;
  цвет границы: прозрачный;
  радиус границы: 1rem;
}
.custom-range::-moz-range-track {
  ширина: 100%;
  высота: 0,5бэр;
  цвет: прозрачный;
  курсор: указатель;
  цвет фона: #dee2e6;
  цвет границы: прозрачный;
  радиус границы: 1rem;
}
.custom-range::-ms-track {
  ширина: 100%;
  высота: 0,5бэр;
  цвет: прозрачный;
  курсор: указатель;
  цвет фона: прозрачный;
  цвет границы: прозрачный;
  ширина границы: 0,5 бэр;
}
.navbar-toggler: не (: отключено): не (. отключено) {
  курсор: указатель;
}
.страница-ссылка: не (: отключено): не (. отключено) {
  курсор: указатель;
}
.close: не (: отключено): не (. отключено) {
  курсор: указатель;
}
.carousel-индикаторы li {
  box-sizing: контент-бокс;
  -ms-flex: 0 1 авто;
  гибкий: 0 1 авто;
  ширина: 30 пикселей;
  высота: 3 пикселя;
  поле справа: 3px;
  поле слева: 3px;
  отступ текста: -999 пикселей;
  курсор: указатель;
  цвет фона: #fff;
  фоновый клип: padding-box;
  граница сверху: 10px сплошная прозрачная;
  нижняя граница: 10px сплошная прозрачная;
  непрозрачность: 0,5;
  переход: непрозрачность 0.
 
 
  6s легкость;
}
 

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

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

 
Образец кнопки 

 
  0.0-beta .2/css/bootstrap.min.css">
Образец кнопки 

2

Вы можете назначить «кнопку» атрибуту роли любого тега/элемента html, чтобы сделать указатель над ним. то есть

2

Обычно я просто добавляю следующий пользовательский CSS, пример W3School с префиксом cursor-

 .cursor-alias {cursor: alias;}
.cursor-all-scroll {курсор: все-прокрутка;}
.курсор-авто {курсор: авто;}
.cursor-cell {курсор: ячейка;}
.cursor-context-menu {курсор: контекстное меню;}
.cursor-col-resize {курсор: col-resize;}
.cursor-copy {курсор: копировать;}
.cursor-crosshair {курсор: перекрестие;}
.cursor-default {курсор: по умолчанию;}
.cursor-e-resize {курсор: e-resize;}
.cursor-ew-resize {курсор: ew-resize;}
.cursor-grab {курсор: -webkit-grab; курсор: захватить;}
.  cursor-grabbing {курсор: -webkit-grabbing; курсор: захват;}
.курсор-помощь {курсор: помощь;}
.cursor-move {курсор: двигаться;}
.cursor-n-resize {курсор: n-resize;}
.cursor-ne-resize {курсор: ne-resize;}
.cursor-new-resize {курсор: new-resize;}
.cursor-ns-resize {курсор: ns-resize;}
.cursor-nw-resize {курсор: nw-resize;}
.cursor-nwse-resize {курсор: nwse-resize;}
.cursor-no-drop {курсор: без капли;}
.cursor-none {курсор: нет;}
.cursor-не-разрешено {курсор: не-разрешено;}
.курсор-указатель {курсор: указатель;}
.курсор-прогресс {курсор: прогресс;}
.cursor-row-resize {курсор: row-resize;}
.cursor-s-resize {курсор: s-resize;}
.cursor-se-resize {курсор: se-resize;}
.cursor-sw-resize {курсор: sw-resize;}
.курсор-текст {курсор: текст;}
.cursor-w-resize {курсор: w-resize;}
.cursor-wait {курсор: подождите;}
.cursor-zoom-in {курсор: увеличение;}
.cursor-zoom-out {курсор: уменьшение;} 

  min.css" rel="stylesheet"/>
Образец кнопки 

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

Лучшее, что вы можете сделать, как предложил Хари Дас, и что я тоже всегда делаю, это добавить следующий css:

 .cursor-pointer {
  курсор: указатель;
}
 

После чего его можно добавить к любому элементу

 
 .. 
 

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

Пример:

 При наведении указателя мыши курсор должен быть установлен на руку или указатель!
 

Ура!

0

Bootstrap 3. У меня сработало простое добавление класса « btn ».

Без курсора-указателя :

 text
 

С курсором-указателем :

 text
 

0

Попробуйте использовать тип = кнопка Наведите на меня

Не знаю, когда добавили, но согласно его документу есть btn-link

 

  <голова>
    
    <мета-кодировка="utf-8">
    
    
    
    
  
  <тело>
Нажмите на меня, наведите на меня ссылку
 <тело>
  

Ссылка

https://getbootstrap.