Как заставить курсор перейти к руке при наведении тега <button>
При просмотре моего сайта курсор меняется только на руку в перчатках для тегов <a>
, а не тегов <button>
. Есть ли причина для этого?
Вот мой код (теги кнопок имеют идентификатор #more в css3).
#more {
background:none;
border:none;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
}
Ответы
Ответ 1
видеть:
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
поэтому вам нужно добавить: cursor:pointer;
В вашем случае используйте:
#more {
background:none;
border:none;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
cursor:pointer;
}
Это применит курсор к элементу с идентификатором "more" (может использоваться только один раз). Так что в вашем HTML используйте
<input type="button" id="more" />
Если вы хотите применить это к более чем одной кнопке, у вас есть более одной возможности:
используя класс
.more {
background:none;
border:none;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
cursor:pointer;
}
и в вашем HTML использовать
<input type="button" class="more" value="first" />
<input type="button" class="more" value="second" />
или применить к HTML-контексту:
input[type=button] {
background:none;
border:none;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
cursor:pointer;
}
и в вашем HTML использовать
<input type="button" value="first" />
<input type="button" value="second" />
Ответ 2
Просто добавьте этот стиль:
cursor: pointer;
Причина, по которой это не происходит по умолчанию, заключается в том, что большинство браузеров резервируют указатель только для ссылок (и, возможно, пару других вещей, которые я забываю, но обычно не <button>
s).
Подробнее о свойстве cursor
: https://developer.mozilla.org/en/CSS/cursor
Я обычно применяю это к <button>
и <label>
по умолчанию.
ПРИМЕЧАНИЕ: Я просто понял это:
теги кнопок имеют идентификатор #more
Очень важно, чтобы каждый элемент имел свой уникальный id
, у вас не может быть дубликатов. Вместо этого используйте атрибут class
и измените селектор с #more
на .more
. Это на самом деле довольно распространенная ошибка, которая является причиной многих проблем и вопросов, задаваемых здесь. Чем раньше вы узнаете, как использовать id
, тем лучше.
Ответ 3
Все, что вам нужно, это просто использовать один из атрибутов CSS: ---- >
курсор: указатель
просто используйте это свойство в css, независимо от его встроенного или внутреннего или внешнего
например (для inline css)
<form>
<input type="submit" style= "cursor:pointer" value="Button" name="Button">
</form>
Ответ 4
#more {
background:none;
border:none;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
cursor: pointer;
}