Как заставить курсор перейти на ручку при наведении значка <button>

Question

При просмотре моего сайта курсор меняется только на руку в перчатках для <a> тегов, а не <button> тегов. Для этого есть причина?

Вот мой код (теги кнопок имеют идентификатор #more в css3).

#more { 
    background:none; 
    border:none; 
    color:#FFF; 
    font-family:Verdana, Geneva, sans-serif; 
} 

Answer 1

см: https://developer.mozilla.org/de/docs/Web/CSS/cursor

поэтому вам нужно добавить: cursor:pointer;

В вашем использовании случай:

#more { 
    background:none; 
    border:none; 
    color:#FFF; 
    font-family:Verdana, Geneva, sans-serif; 
    cursor:pointer; 
} 

Это будет применяться curser к элементу с идентификатором " больше "(может использоваться только один раз). Так что в вашем HTML использовать

<input type="button" id="more" /> 

Если вы хотите применить это к более чем одной кнопки, то у вас есть более чем одна возможность:

с помощью CLASS

.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" /> 

Answer 2

Просто добавьте этот стиль:

cursor: pointer; 

Причина этого не происходит по умолчанию, потому что в большинстве браузеров зарезервируйте указатель только для ссылок (и, возможно, пару других вещей, которые я забываю, но обычно не <button> s).

Подробнее о cursor собственности: https://developer.mozilla.org/en/CSS/cursor

Я обычно применяю это <button> и <label> по умолчанию.

ПРИМЕЧАНИЕ: Я только что поймал это:

метки кнопки имеют идентификатор #more

Это очень важно, чтобы каждый элемент имеет свой собственный уникальный id, вы не можете иметь дубликаты. Используйте вместо этого атрибут class и измените свой селектор от #more до .more. Это на самом деле довольно распространенная ошибка, которая является причиной многих проблем и вопросов, задаваемых здесь. Чем раньше вы узнаете, как использовать id, тем лучше.

Answer 3

#more { 
    background:none; 
    border:none; 
    color:#FFF; 
    font-family:Verdana, Geneva, sans-serif; 
    cursor: pointer; 
} 

Answer 4

Все и нужно просто использовать один из атрибута CSS, который ---->

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

просто использовать это свойство в CSS, независимо от его инлайн или внутренний или внешний

, например (для встроенного CSS)

<form> 
<input type="submit" style= "cursor:pointer" value="Button" name="Button"> 
</form>