Почти все веб-страницы меняют курсоры для лучшего восприятия пользователем или без какой-либо причины. Настройка курсора является простым способом добавления дополнительного эффекта на вашей веб-странице.
Для установления внешнего вида курсора используйте 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>
<h4>Наведите курсор мыши на элемент списка и увидите, как меняется курсор по умолчанию в указатель:</h4>
<ul>
<li>Элемент списка 1 с курсором по умолчанию.</li>
<li class="pointer">Элемент списка 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>
<h4>Наведите курсор мыши на гиперссылку и увидите, как "pointer" меняется в "default":</h4>
<p><a href="https://www.w3docs.com">W3docs</a> ссылка с исходным видом "pointer".</p>
<p><a class="link" 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>
<h2>Какое у вас впечатление от нашей веб-страницы?</h2>
<button id="happy">Радостное</button>
<button id="sad">Грустное</button>
<button id="love">Влюбленное</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 class="cactus" src="/uploads/media/default/0001/02/fc16e475b5cefcbe57924b1a4a3b3e38e936b77c.png" alt="cactus">
<img class="nature" src="/uploads/media/default/0001/02/2a85e41725d19aeae7066836accaababd42e638d.png" alt="nature">
<img class="dog" src="/uploads/media/default/0001/02/23df99002f94be0d1ca915058e2216c756be155e.png" alt="dog">
<img class="house" 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>
<h2>Пример свойства cursor</h2>
<p> Наведите курсор мыши на элемент и увидите изменения:</p>
<div class="cursor">
<div class="auto">auto</div>
<div class="default">default</div>
<div class="none">none</div>
<div class="context-menu">context-menu</div>
<div class="help">help</div>
<div class="pointer">pointer</div>
<div class="progress">progress</div>
<div class="wait">wait</div>
<div class="cell">cell</div>
<div class="crosshair">crosshair</div>
<div class="text">text</div>
<div class="vertical-text">vertical-text</div>
<div class="alias">alias</div>
<div class="copy">copy</div>
<div class="move">move</div>
<div class="no-drop">no-drop</div>
<div class="not-allowed">not-allowed</div>
<div class="all-scroll">all-scroll</div>
<div class="col-resize">col-resize</div>
<div class="row-resize">row-resize</div>
<div class="n-resize">n-resize</div>
<div class="s-resize">s-resize</div>
<div class="e-resize">e-resize</div>
<div class="w-resize">w-resize</div>
<div class="ns-resize">ns-resize</div>
<div class="ew-resize">ew-resize</div>
<div class="ne-resize">ne-resize</div>
<div class="nw-resize">nw-resize</div>
<div class="se-resize">se-resize</div>
<div class="sw-resize">sw-resize</div>
<div class="nesw-resize">nesw-resize</div>
<div class="nwse-resize">nwse-resize</div>
<div class="grab">grab</div>
<div class="grabbing">grabbing</div>
<div class="zoom-in">zoom-in</div>
<div class="zoom-out">zoom-out</div>
</div>
</body>
</html>I’ve got a list, and I have a click handler for its items:
<ul>
<li>foo</li>
<li>goo</li>
</ul>
How can I change the mouse pointer into a hand pointer (like when hovering over a button)? Right now the pointer turns into a text selection pointer when I hover over the list items.
asked Jun 21, 2010 at 19:45
user246114user246114
49.5k42 gold badges112 silver badges149 bronze badges
4
In light of the passage of time, as people have mentioned, you can now safely just use:
li { cursor: pointer; }
johannchopin
13.2k9 gold badges51 silver badges99 bronze badges
answered Jun 21, 2010 at 19:50
6
Use for li:
li:hover {
cursor: pointer;
}
See more cursor properties with examples after running snippet option:
.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; }
.cursors > div {
float: left;
box-sizing: border-box;
background: #f2f2f2;
border:1px solid #ccc;
width: 20%;
padding: 10px 2px;
text-align: center;
white-space: nowrap;
&:nth-child(even) {
background: #eee;
}
&:hover {
opacity: 0.25
}
}<h1>Example of cursor</h1>
<div class="cursors">
<div class="auto">auto</div>
<div class="default">default</div>
<div class="none">none</div>
<div class="context-menu">context-menu</div>
<div class="help">help</div>
<div class="pointer">pointer</div>
<div class="progress">progress</div>
<div class="wait">wait</div>
<div class="cell">cell</div>
<div class="crosshair">crosshair</div>
<div class="text">text</div>
<div class="vertical-text">vertical-text</div>
<div class="alias">alias</div>
<div class="copy">copy</div>
<div class="move">move</div>
<div class="no-drop">no-drop</div>
<div class="not-allowed">not-allowed</div>
<div class="all-scroll">all-scroll</div>
<div class="col-resize">col-resize</div>
<div class="row-resize">row-resize</div>
<div class="n-resize">n-resize</div>
<div class="s-resize">s-resize</div>
<div class="e-resize">e-resize</div>
<div class="w-resize">w-resize</div>
<div class="ns-resize">ns-resize</div>
<div class="ew-resize">ew-resize</div>
<div class="ne-resize">ne-resize</div>
<div class="nw-resize">nw-resize</div>
<div class="se-resize">se-resize</div>
<div class="sw-resize">sw-resize</div>
<div class="nesw-resize">nesw-resize</div>
<div class="nwse-resize">nwse-resize</div>
</div>
ihatecsv
5326 silver badges20 bronze badges
answered Jan 4, 2017 at 11:21
Santosh KhalseSantosh Khalse
11.6k3 gold badges35 silver badges36 bronze badges
4
You do not require jQuery for this, simply use the following CSS content:
li {cursor: pointer}
And voilà! Handy.
answered Jun 21, 2010 at 19:47
0
Use:
li:hover {
cursor: pointer;
}
Other valid values (which hand is not) for the current HTML specification can be viewed here.
answered Jan 7, 2013 at 11:50
AlastairAlastair
6,7994 gold badges35 silver badges29 bronze badges
4
Use
cursor: pointer;
cursor: hand;
if you want to have a crossbrowser result!
answered Oct 27, 2011 at 7:34
2
CSS:
.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; }
You can also have the cursor be an image:
.img-cur {
cursor: url(images/cursor.png), auto;
}
trungk18
19.5k8 gold badges46 silver badges82 bronze badges
answered Sep 11, 2014 at 7:51
2
I think it would be smart to only show the hand/pointer cursor when JavaScript is available. So people will not have the feeling they can click on something that is not clickable.
To achieve that you could use the JavaScript libary jQuery to add the CSS to the element like so
$("li").css({"cursor":"pointer"});
Or chain it directly to the click handler.
Or when modernizer in combination with <html class="no-js"> is used, the CSS would look like this:
.js li { cursor: pointer; }
answered Mar 2, 2014 at 12:40
ChristophChristoph
1,30016 silver badges28 bronze badges
li:hover {cursor: hand; cursor: pointer;}
answered Jun 5, 2013 at 21:52
XedretXedret
1,80318 silver badges24 bronze badges
0
Just for completeness:
cursor: -webkit-grab;
It also gives a hand, the one you know when moving the view of an image around.
It is quite useful if you want to emulate grab behavior using jQuery and mousedown.
answered Aug 18, 2016 at 15:19
AvatarAvatar
14k8 gold badges116 silver badges190 bronze badges
For complete cross browser, use:
cursor: pointer;
cursor: hand;
answered Dec 5, 2012 at 19:46
Erich TovenErich Toven
2272 silver badges2 bronze badges
You can change it either on hover or just specify cursor:pointer on list item, both will work.
ul li {
cursor: pointer;
}
Alternatively
ul li:hover {
cursor: pointer;
}
answered Jul 21, 2021 at 9:33
Ismoil ShokirovIsmoil Shokirov
1,7331 gold badge13 silver badges30 bronze badges
For being able to make anything get the «mousechange» treatment, you can add a CSS class:
.mousechange:hover {
cursor: pointer;
}<span class="mousechange">Some text here</span>I would not say to use cursor:hand since it was only valid for Internet Explorer 5.5 and below, and Internet Explorer 6 came with Windows XP (2002). People will only get the hint to upgrade when their browser stops working for them. Additionally, in Visual Studio, it will red underline that entry. It tells me:
Validation (CSS 3.0): «hand» is not a valid value for the «cursor»
property
answered Jul 23, 2014 at 2:25
vapcguyvapcguy
6,8971 gold badge53 silver badges48 bronze badges
0
Simply just do something like this:
li {
cursor: pointer;
}
I apply it on your code to see how it works:
li {
cursor: pointer;
}<ul>
<li>foo</li>
<li>goo</li>
</ul>Note: Also DO not forget you can have any hand cursor with customised cursor, you can create fav hand icon like this one for example:
div {
display: block;
width: 400px;
height: 400px;
background: red;
cursor: url(http://findicons.com/files/icons/1840/free_style/128/hand.png) 4 12, auto;
}<div>
</div>answered Jun 21, 2017 at 12:50
AlirezaAlireza
98k27 gold badges266 silver badges171 bronze badges
Simply put this code.
li{cursor: pointer;}
answered Nov 25, 2021 at 8:23
FerozFeroz
4613 silver badges11 bronze badges
ul li:hover{
cursor: pointer;
}
answered Dec 21, 2014 at 18:34
user3776645user3776645
3773 silver badges5 bronze badges
All of the other responses suggest using the standard CSS pointer, however, there are two methods:
-
Apply the CSS property
cursor:pointer;to the elements. (This is the default style when a cursor hovers over a button.) -
Apply the CSS property
cursor:url(pointer.png);using a custom graphic for your pointer. This may be more desirable if you want to ensure that the user experience is identical on all platforms (instead of allowing the browser/OS decide what your pointer cursor should look like). Note that fallback options may be added in case the image is not found, including secondary urls or any of the other options i.e.cursor:url(pointer.png,fallback.png,pointer);
Of course these may be applied to the list items in this manner li{cursor:pointer;}, as a class .class{cursor:pointer;}, or as a value for the style attribute of each element style="cursor:pointer;".
answered Feb 27, 2016 at 5:25
AndrewAndrew
1,31214 silver badges20 bronze badges
Use:
ul li:hover{
cursor: pointer;
}
For more mouse events, check CSS cursor property.
answered Feb 3, 2016 at 6:48
1
You can use one of the following:
li:hover
{
cursor: pointer;
}
or
li
{
cursor: pointer;
}
Working example 1:
li:hover
{
cursor: pointer;
}<ul>
<li>foo</li>
<li>bar</li>
</ul>Working example 2:
li
{
cursor: pointer;
}<ul>
<li>foo</li>
<li>bar</li>
</ul>answered May 13, 2018 at 10:29
willy wonkawilly wonka
1,3201 gold badge17 silver badges29 bronze badges
For a basic hand symbol:
Try
cursor: pointer
If you want a hand symbol like drag some item and drop it, try:
cursor: grab
answered Dec 24, 2015 at 4:13
You can use the code below:
li:hover { cursor: pointer; }
Jared Forth
1,5676 gold badges19 silver badges31 bronze badges
answered Jun 6, 2018 at 9:54
Captain JKCaptain JK
1601 silver badge7 bronze badges
0
Using an HTML Hack
Note: this is not recommended as it is considered bad practice
Wrapping the content in an anchor tag containing an href attribute will work without explicitly applying the cursor: pointer; property with the side effect of anchor properties (amended with CSS):
<a href="#" style="text-decoration: initial; color: initial;"><div>This is bad practice, but it works.</div></a>
AMDG
1,0501 gold badge14 silver badges29 bronze badges
answered Jun 19, 2016 at 11:19
Rohit NairRohit Nair
6093 gold badges7 silver badges22 bronze badges
2
You can also use the following style:
li {
cursor: grabbing;
}
answered Sep 14, 2017 at 11:22
Check the following. I get it from W3Schools.
.alias { cursor: alias; }
.all-scroll { cursor: all-scroll; }
.auto { cursor: auto; }
.cell { cursor: cell; }
.context-menu { cursor: context-menu; }
.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: -webkit-grab;
cursor: grab;
}
.grabbing {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.help { cursor: help; }
.move { cursor: move; }
.n-resize { cursor: n-resize; }
.ne-resize { cursor: ne-resize; }
.nesw-resize { cursor: nesw-resize; }
.ns-resize { cursor: ns-resize; }
.nw-resize { cursor: nw-resize; }
.nwse-resize { cursor: nwse-resize; }
.no-drop { cursor: no-drop; }
.none { cursor: none; }
.not-allowed { cursor: not-allowed; }
.pointer { cursor: pointer; }
.progress { cursor: progress; }
.row-resize { cursor: row-resize; }
.s-resize { cursor: s-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.text { cursor: text; }
.url { cursor: url(myBall.cur), auto; }
.w-resize { cursor: w-resize; }
.wait { cursor: wait; }
.zoom-in { cursor: zoom-in; }
.zoom-out { cursor: zoom-out; }<!DOCTYPE html>
<html>
<body>
<h1>The cursor property</h1>
<p>Mouse over the words to change the mouse cursor.</p>
<p class="alias">alias</p>
<p class="all-scroll">all-scroll</p>
<p class="auto">auto</p>
<p class="cell">cell</p>
<p class="context-menu">context-menu</p>
<p class="col-resize">col-resize</p>
<p class="copy">copy</p>
<p class="crosshair">crosshair</p>
<p class="default">default</p>
<p class="e-resize">e-resize</p>
<p class="ew-resize">ew-resize</p>
<p class="grab">grab</p>
<p class="grabbing">grabbing</p>
<p class="help">help</p>
<p class="move">move</p>
<p class="n-resize">n-resize</p>
<p class="ne-resize">ne-resize</p>
<p class="nesw-resize">nesw-resize</p>
<p class="ns-resize">ns-resize</p>
<p class="nw-resize">nw-resize</p>
<p class="nwse-resize">nwse-resize</p>
<p class="no-drop">no-drop</p>
<p class="none">none</p>
<p class="not-allowed">not-allowed</p>
<p class="pointer">pointer</p>
<p class="progress">progress</p>
<p class="row-resize">row-resize</p>
<p class="s-resize">s-resize</p>
<p class="se-resize">se-resize</p>
<p class="sw-resize">sw-resize</p>
<p class="text">text</p>
<p class="url">url</p>
<p class="w-resize">w-resize</p>
<p class="wait">wait</p>
<p class="zoom-in">zoom-in</p>
<p class="zoom-out">zoom-out</p>
</body>
</html>
Kolappan N
3,3732 gold badges35 silver badges40 bronze badges
answered Sep 29, 2018 at 5:48
just using CSS to set customize the cursor pointer
/* Keyword value */
cursor: pointer;
cursor: auto;
/* URL, with a keyword fallback */
cursor: url(hand.cur), pointer;
/* URL and coordinates, with a keyword fallback */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;
/* Global values */
cursor: inherit;
cursor: initial;
cursor: unset;
/* 2 URLs and coordinates, with a keyword fallback */
cursor: url(one.svg) 2 2, url(two.svg) 5 5, progress;
demo
Note: cursor support for many format icons!
such as .cur, .png, .svg, .jpeg, .webp, and so on
li:hover{
cursor: url("https://cdn.xgqfrms.xyz/cursor/mouse.cur"), pointer;
color: #0f0;
background: #000;
}
/*
li:hover{
cursor: url("../icons/hand.cur"), pointer;
}
*/
li{
height: 30px;
width: 100px;
background: #ccc;
color: #fff;
margin: 10px;
text-align: center;
list-style: none;
}<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>refs
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
answered Aug 29, 2019 at 9:48
xgqfrmsxgqfrms
8,8191 gold badge59 silver badges60 bronze badges
<style>
.para{
color: black;
}
.para:hover{
cursor: pointer;
color: blue;
}
</style>
<div class="para">
In the above HTML code [:hover] is used to indicate that the following style must be applied only on hovering or keeping the mouse cursor on it.
There are several types of cursors available in CSS:
View the below code for types of cursor:
<style>
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.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: -webkit-grab; cursor: grab;}
.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
</style>
Click the below link for viewing how the cursor property acts:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor
answered Jul 4, 2020 at 5:54
Курсор
Описание
The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.
| Начальное значение | auto |
|---|---|
| Применяется к | все элементы |
| Наследуется | да |
| Обработка значения | как указано, но с абсолютными значениями url |
| Animation type | discrete |
Синтаксис
/* Применение ключевых значений */
cursor: pointer;
cursor: auto;
/* Использование URL и координат */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;
/* Глобальные значения */
cursor: inherit;
cursor: initial;
cursor: unset;
Значения
<url>-
Ссылка или разделённый запятыми список ссылок:
url(…), url(…), …, указывающие на файл изображения. Дополнительные ссылки могут быть предоставлены в качестве запасных значений, на случай если изображение по основной ссылке не поддерживается в качестве курсора. Запасное значение, не являющееся ссылкой (одно или несколько ключевых слов) должно находиться в конце списка значений. See Using URL values for the cursor property for more details. <x><y>
Экспериментальная возможность
-
Необязательные значения х- и у- координат. Два безразмерных неотрицательных числа меньше 32.
- Ключевые слова
-
Наведите курсор на картинку, чтобы увидеть пример в действии:
Категория Значение Вид Описание Основные autoБраузер самостоятельно определяет значение курсора в зависимости от
свойств элемента, на который наведена мышь.
Например: при наведении
на текст отобразит курсорtext.default
Основной курсор платформы, обычно стрелочка. noneКурсор не отображается. Ссылки и статусы выполнения задач context-menu
Доступно контекстное меню. help
Доступна вспомогательная информация. pointer
Указатель, обозначающий ссылку, обычно указующая рука. progress
Программа занята, но пользователь может взаимодействовать с интерфейсом
(в отличие отwait).wait
Программа занята (песочные часы). Выделение cell
Указывает на возможность выбора клетки или клеток таблицы. crosshair
Крестик, часто используемый для обозначения выбора на битовой карте. text
Значок выбора текста. vertical-text
Значок выбора вертикального текста. «Захвати и перенеси» alias
Будет создана ссылка внутри страницы. copy
Указывает на возможность копирования. move
Указывает на возможность перемещения объекта.
no-drop
Указывает на невозможность «сбрасывания» объекта.
В Windows и Mac
OSX то же самое что иnot-allowed.not-allowed
Указатель невозможности выполнения действия. Изменение размера, прокручивание (скроллинг) all-scroll
Указатель возможности перемещения по странице в любом направлении.
в
Windows то же самое чтоmove.col-resize
Объект может быть раздвинут/сдвинут горизонтально. Обычно две
вертикальные черты со стрелочками в разные стороны.row-resize
Объект может быть раздвинут/сдвинут вертикально. Две горизонтальные
черты с вертикальными стрелочками.n-resize
Грань или грани могут быть перемещены. Например
se-resizeиспользуется для обозначения перемещения с
юго-востока. В некоторых системах то же самое что двунаправленное
изменение.e-resize
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize
Двунаправленное изменение размера. ns-resize
nesw-resize
nwse-resize
Масштабирование zoom-in
Приближение или уменьшение.
zoom-out
Захват grab
Указывает на возможность схватить и переместить объект.
grabbing
Формальный синтаксис
Примеры
.foo {
cursor: crosshair;
}
/* use prefixed-value if "zoom-in" isn't supported */
.bar {
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
/* standard cursor value as fallback for url() must be provided (doesn't work without) */
.baz {
cursor: url(hyper.cur), auto;
}
Спецификации
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # cursor |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
Курсоры
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет
ли он использоваться к месту. Многих пользователей подобные изменения могут
ввести в заблуждение, когда, например, вместо традиционной «руки»,
появляющейся при наведении на ссылку, возникает нечто другое. В большинстве
случаев, лучше оставить все по умолчанию.
В табл. 1 приведены возможные варианты курсоров. Их вид может отличаться от
конечного результата, это зависит от настроек операционной системы.
| Вид | Значение | Тест | Пример |
|---|---|---|---|
 |
default | cursor: default | |
 |
crosshair | cursor: crosshair | |
 |
pointer | cursor: pointer | |
 |
move | cursor: move | |
 |
text | cursor: text | |
 |
wait | cursor: wait | |
 |
help | cursor: help | |
 |
n-resize | cursor: n-resize | |
 |
ne-resize | cursor: ne-resize | |
 |
e-resize | cursor: e-resize | |
 |
se-resize | cursor: se-resize | |
 |
s-resize | cursor: s-resize | |
 |
sw-resize | cursor: sw-resize | |
 |
w-resize | cursor: w-resize | |
 |
nw-resize | cursor: nw-resize |
Синтаксис создания курсора очень прост. Следует определить класс и в нем использовать
один из типов курсора, описанных в таблице. Ниже в примере 1 показано,
как можно переопределить вид курсора при наведении его на разные ссылки.
Пример 1. Изменение курсора при наведении его на ссылку
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Курсоры</title>
<style type="text/css">
.movelink { cursor: move; }
.helplink { cursor: help; }
</style>
</head>
<body>
<p><a href="new.html" class="movelink">ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ</a></p>
<p><a href="new.html" class="helplink">СПРАВКА</a></p>
</body>
</html> Если вы желаете переопределить курсор мыши для всей веб-страницы целиком,
а не только для ссылок, воспользуйтесь селектором BODY
(пример 2).
Пример 2. Изменение вида курсора для всей веб-страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Курсоры</title>
<style type="text/css">
body { cursor: ne-resize; }
</style>
</head>
<body>
<p><a href="new.html">ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ</a></p>
<p><a href="new.html">СПРАВКА</a></p>
</body>
</html>Также можно задать разный вид курсора для отдельных областей веб-страницы
используя теги <div> или <span>.
В этом случае вначале определяется класс и его стиль, а затем он применяется
к тегу, например, <span>. Такой подход позволяет описать
стиль один единственный раз, а затем применять его в любом нужном месте (пример 3).
Пример 3. Курсор для разных областей веб-страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Курсоры</title>
<style type="text/css">
.cross { cursor: crosshair; }
.help { cursor: help; }
</style>
</head>
<body>
<p class="cross">На этом тексте курсор мыши примет вид перекрестья.</p>
<p><a href="1.html" class="help">СПРАВКА 1</a></p>
<p><a href="2.html" class="help">СПРАВКА 2</a></p>
<p><a href="3.html" class="help">СПРАВКА 3</a></p>
</body>
</html>Здравствуйте, уважаемые читатели блога webcodius.ru. Сегодня мы рассмотрим небольшую тему как изменить курсор мыши при помощи css. В операционной системе вашего компьютера предусмотрено несколько возможных вариантов курсора мыши в зависимости от совершаемых действий. Курсор может приобретать вид различных стрелок, руки, перекрестья, песочных часов и т.п.
Такие же образы может приобретать курсор мыши и при работе в браузере при просмотре различных веб страниц. Это возможно благодаря каскадным таблицам стилей, которые предоставляют нам такую замечательную возможность как изменение курсора мыши при наведении его на элементы html страницы.
Курсор мыши можно поменять с помощью правила css cursor, которое позволяет установить форму курсора мыши при наведении его на данный элемент веб-страницы. Этот атрибут можно применять к любому элементу веб страницы, будь это строчный или блочный элемент.
Если посмотреть спецификацию css, то вы заметите, что возможных значений у атрибута cursor довольно много:
cursor: auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|inherit
Большинство значений на практике применяется довольно редко. По умолчанию для свойста cursor применяется значение auto. В этом случае браузер отображает курсор по умолчанию для текущего элемента. Например, при наведении на ссылку курсор приобретает форму руки, в тексте показывается обычный текстовый курсор, а на пустых местах простая стрелочка.
Все основные возможные значения приведены в таблице ниже. Столбец «Значение» содержит значения параметра cursor, во втором столбце «Вид» отображение курсора на моем компьютере, в третьем пример использования параметра с данным значением. При наведении курсора мыши на ячейки со значениями вы сможете увидеть как он изменяется в вашем браузере и сравнить с моим вариантом. В зависимости от вашей операционной системы и настроек вид курсора может отличаться.
Некоторые значения для css правила cursor перечисленные выше могут не работать в различных браузерах. Особенно часто проблемы возникают с Оперой, иногда что то может не работать в браузерах Mozila Firefox и Chrome. Установленный по умолчанию в операционной системе Windows браузер Internet Explorer поддерживает все значения.
С помощью правила cursor также можно задать свой собственный курсор, задав путь к соответствующей картинке. Расширение файла картинки с курсом обычно бывает .cur. Кроме формата CUR Internet Explorer в качестве формата файла курсора поддерживает еще и формат ANI. А Firefox, Chrome и Safari кроме CUR поддерживают еще форматы PNG, GIF и JPG.
При указании своего собственного курсора синтаксис правила немного меняется. Через запятую перечисляется одно или несколько значений url, а последним значением обязательно должно быть одно из ключевых слов:
cursor: url (‘адрес картинки 1’), url (‘адрес картинки 2’), …, <ключевое слово>
При таком стилевом правиле браузер сначала попытается открыть первый файл с курсором, а если открыть его не по каким-либо причинам не удается, перейдет к следующему файлу и так далее. Кстати, для этого абзаца я настроил нестандартный курсор. Поэтому при наведении на него мышкой, если ваш браузер поддерживает формат файла, курсор будет меняться. Чтобы достигнуть такого эффекта достаточно такой записи:
<p style=»cursor:url (‘//webcodius.ru/images/cursor.cur’), pointer;»>текст абзаца</p>
Вообще CSS правило Cursor веб-мастера применяю довольно редко, чтобы не вводить пользователя в заблуждение. Прежде чем переделать вид курсора, определите, будет ли это изменение к месту. Ведь, допустим, что может подумать пользователь, если вместо традиционной руки, появляющейся при наведении на ссылку, возникнет что-то другое.
На этом о курсорах все. Не забудьте подписаться на обновления блога и буду благодарен если воспользуетесь кнопочками социальных сетей:
В CSS существует свойство, с помощью которого вы сможете легко изменить курсор на своем сайте. Часто бывает так, что стандартный курсор Windows не вписывается в общую картину сайта. Чтобы изменить это, сделаем небольшие поправки в коде.
Делаем нестандартный курсор на сайте
Если вы хотите изменить курсор на всем сайте, то в стили вашего сайта добавьте следующее:
body {
cursor: url('/пусть к файлу/sword.cur'), auto;
}В коде вам нужно изменить адрес до вашего курсора. Сам курсор может быть как обычное изображение (расширений *.png, *.gif, *.jpg, *.ico) или же иметь специальное расширение курсоров *.cur
Если же вы хотите изменить курсор, например, только при наведении на ссылку или нужный вам объект, то вставьте:
.link:hover {
cursor: url('/путь к файлу/sword.cur'), auto;
}Здесь .link – это класс у ссылки, и при наведении на нее будет появляться наш курсор.
Стандартные свойства CSS для изменения курсора
Если же вы не хотите перегружать ваш сайт сторонними курсорами, то можно использовать стандартные свойства CSS. Что представляет из себя каждое свойство, отражено в таблице ниже. Наведите курсор на ячейку – и ваш курсор изменится.
| cursor: auto; | cursor: default; | cursor: none; |
| cursor: context-menu; | cursor: help; | cursor: pointer; |
| cursor: progress; | cursor: wait; | cursor: cell; |
| cursor: crosshair; | cursor: text; | cursor: vertical-text; |
| cursor: alias; | cursor: copy; | cursor: move; |
| cursor: no-drop; | cursor: not-allowed; | cursor: all-scroll; |
| cursor: n-resize; | cursor: e-resize; | cursor: s-resize; |
| cursor: w-resize; | cursor: col-resize; | cursor: row-resize; |
| cursor: nw-resize; | cursor: se-resize; | cursor: sw-resize; |
| cursor: ew-resize; | cursor: nesw-resize; | cursor: nwse-resize; |
| cursor: zoom-in; | cursor: zoom-out; | cursor: grabbing; |
| cursor: grab; | cursor: ns-resize; | cursor: ne-resize; |
Для применения этих свойств вы так же копируете нужное вам и применяете к объектам на вашем сайте, например:
.link:hover {
cursor: w-resize;
}А в качестве бонуса мы предлагаем вам небольшую подборку красивых курсоров, которые вы можете использовать на своем сайте.
От автора: браузер автоматически меняет курсор мыши в контексте множества элементов интерфейса. Например, при наведении на ссылки он меняется на руку. Однако есть ситуации, когда вам потребуется вручную менять иконку указателя мыши для определенных операций (иконка компаса, показывающая, что элемент можно передвинуть). Обычно это делается через CSS, в частности через свойство cursor.
Думайте, куда наводите указатель
Крайне важно понимать, что нельзя изменять курсор мыши просто «потому что». Указатель мыши – первичный метод взаимодействия пользователя с вашим сайтом, и его изменение просто потому, что вам так хочется, может полностью разрушить ожидания пользователя от интерфейса, что приведет к разочарованию. Пользователь просто покинет сайт. Если вы используете свойство cursor, оно всегда должно подходить под вашу текущую задачу и соответствовать ожиданиям пользователя.
Также важно отметить тот факт, что изменение курсора в CSS не затрагивает его функционал. Если задать свойство cursor: grab, предмет автоматически не станет перетаскиваемым. Функциональная сторона вопроса обрабатывается на стороне JavaScript. CSS всего лишь изменяет представление курсора.
Свойство cursor задается для конкретных элементов. Часто это может быть :hover или другое похожее состояние.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
|
div#inked-painted:hover { cursor: col—resize; } |
Диапазон иконок курсора в браузерах крайне велик. В разных операционных системах одни и те же курсоры выглядят по-разному. Единственный способ обеспечить полную идентичность в разных операционных системах – использовать свои изображения (смотрите руководство в конце данной статьи). Ниже можно просмотреть иконки курсоров, наведя указатель мыши на название в левом столбце.
default — Значение по умолчанию, обычный указатель
auto — Курсор меняется в зависимости от текущего контекста в браузере. Курсор не всегда будет принимать подходящий вид или тот, который вы хотите.
none — Курсор отсутствует. Осторожно используйте это значение, оно может запутать пользователя.
context-menu — Контекстное меню доступно.
help — Есть справка
pointer — Ассоциируется с наведением мыши на ссылки. Иконка в виде руки
progress — Веб-приложение или сайт выполняют операции в фоновом режиме, но вы все еще можете с ними работать. Не путайте с тегом progress. Часто отображается как wait (см. ниже).
wait — Приложение занято (обычно иконка в виде крутящегося кольца или часов).
cell — Показывает, что ячейки таблицы можно выбрать.
crosshair — Крест. Часто используется для индикации выбранной области на изображениях.
text — Горизонтальный текст можно выделить.
vertical-text — Вертикальный текст можно выделить.
alias — Можно создать алиас, ярлык или символическую ссылку.
copy — Контент можно скопировать.
move — Элемент можно переместить.
no-drop — В данную область нельзя переместить элемент. (Часто иконка совпадает с not-allowed – смотрите ниже).
not-allowed — В этой области действие не может быть выполнено.
all-scroll — Элемент можно прокручивать в любых направлениях.
col-resize — Размер элемента или колонки можно изменять по горизонтали.
row-resize — Размер элемента или ряда можно изменять по вертикали.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
n-resize — Размер элемента можно изменять только по вертикали.
e-resize — Размер элемента можно изменять только по горизонтали.
w-resize — Элемент можно расширить влево.
s-resize — Элемент можно расширить только вниз.
ne-resize — Правый верхний угол элемента можно перетащить.
nw-resize — Верхний левый угол элемента можно перетащить.
se-resize — Нижний правый угол элемента можно перетащить.
sw-resize — Нижний левый угол элемента можно перетащить.
ew-resize — Размер элемента можно менять по горизонтали.
ns-resize — Размер элемента можно менять по вертикали.
nesw-resize — Размер элемента можно менять по диагонали в указанных направлениях.
nwse-resize — Размер элемента можно менять по диагонали в указанных направлениях.
zoom-in — Элемент можно увеличить. Не поддерживается в IE.
zoom-out — Элемент можно уменьшить. Не поддерживается в IE.
grab — Элемент можно захватить. Не поддерживается в IE; в других браузерах необходимы вендорные префиксы перед значением(cursor: -webkit-grab и т.д.).
grabbing — Элемент захвачен. Не поддерживается в IE; как и в предыдущем примере, тут нужны вендорные префиксы.
Само значение не влияет на поведение курсора: значение nesw-resize может спокойно выделять текст.
Пользовательские курсоры
В качестве иконки курсора можно указать изображение. Ставится оно точно так же, как и фоновое изображение. Однако с данным методом есть ряд проблем:
IE поддерживает только файлы форматов .cur и .ani, остальные браузеры поддерживают рекомендуемый PNG (так как в нем есть альфа канал);
Все браузеры кроме IE поддерживают быструю смену курсоров – активация части курсора. IE игнорирует координаты Х и У.
Дизайн курсора мыши, как и фавикона, требует особенной осторожности. Эти элементы могут быть расположены как на светлом, так и на темном фоне. Именно поэтому они должны прекрасно работать во всех условиях. Пример на рисунке ниже:
Для пользовательского курсора необходимо прописывать указатель по умолчанию и фолбэк, которые нужны для браузеров типа IE:
|
canvas { cursor: crosshair; cursor: url(circular—cursor.png) 53 53, crosshair; } |
Значение 53 53 показывает сам курсор, его центр.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Верстка. Быстрый старт
Практический курс по верстке адаптивного сайта с нуля!
Смотреть
How do I change the cursor pointer to hand when my mouse goes over a <tr> in a <table>
<table class="sortable" border-style:>
<tr>
<th class="tname">Name</th><th class="tage">Age</th>
</tr>
<tr><td class="tname">Jennifer</td><td class="tage">24</td></tr>
<tr><td class="tname">Kate</td><td class="tage">36</td></tr>
<tr><td class="tname">David</td><td class="tage">25</td></tr>
<tr><td class="tname">Mark</td><td class="tage">40</td></tr>
</table>
asked Feb 15, 2012 at 4:01
Zeeshan RangZeeshan Rang
19.1k28 gold badges71 silver badges100 bronze badges
1
You can do this with CSS actually.
.sortable tr {
cursor: pointer;
}
Gary
3,7017 gold badges35 silver badges59 bronze badges
answered Feb 15, 2012 at 4:06
2
I’ve searched bootstrap styles a bit and found this:
[role=button]{cursor:pointer}
So I assume you can get what you want with:
<span role="button">hi</span>
answered Dec 12, 2015 at 18:27
4
The easiest way I’ve found is to add
style="cursor: pointer;"
to your tags.
answered Jun 14, 2012 at 17:58
Ira HermanIra Herman
2,7761 gold badge22 silver badges22 bronze badges
0
Add cursor: pointer to your css.
answered Feb 15, 2012 at 4:03
James MontagneJames Montagne
76.8k14 gold badges108 silver badges129 bronze badges
I added this to my style.css to manage cursor options:
.cursor-pointer {cursor: pointer;}
.cursor-crosshair {cursor: crosshair;}
.cursor-eresize {cursor: e-resize;}
.cursor-move {cursor: move;}
Michael M.
7,2306 gold badges14 silver badges34 bronze badges
answered Oct 15, 2014 at 8:59
xackoboxackobo
2412 silver badges4 bronze badges
1
Use the style cursor: pointer; in the CSS for the element you want the cursor to change on.
In your case, you would use (in your .css file):
.sortable {
cursor: pointer;
}
answered Feb 15, 2012 at 4:03
ChetanChetan
45.9k31 gold badges106 silver badges145 bronze badges
For compatibility with IE < 6 use this style in that order:
.sortable:hover {
cursor: pointer;
cursor: hand;
}
But remember that IE < 7 supports :hover pseudoclass only with <a> element.
answered Mar 18, 2014 at 12:37
UbiQueUbiQue
1,5011 gold badge12 silver badges10 bronze badges
Use the CSS cursor property like so:
<table class="sortable">
<tr>
<th class="tname">Name</th><th class="tage">Age</th>
</tr>
<tr style="cursor: pointer;"><td class="tname">Jennifer</td><td class="tage">24</td></tr>
<tr><td class="tname">Kate</td><td class="tage">36</td></tr>
<tr><td class="tname">David</td><td class="tage">25</td></tr>
<tr><td class="tname">Mark</td><td class="tage">40</td></tr>
</table>
Of course you should put the style into your CSS file and apply it to the class.
answered Feb 15, 2012 at 4:04
EverPresentEverPresent
1,89317 silver badges20 bronze badges
Example with styles inline:
<table>
<tr> <td style="cursor: pointer;">mouse me over: pointer</td> </tr>
<tr> <td style="cursor: wait;">mouse me over: wait</td> </tr>
<tr> <td style="cursor: zoom-in;">mouse me over: zoom-in</td> </tr>
</table>answered Jan 15, 2020 at 16:36
fmagnofmagno
1,36611 silver badges26 bronze badges
Using css
table tr:hover{cursor:pointer;} /* For all tables*/
table.sortable tr:hover{cursor:pointer;} /* only for this one*/
answered Feb 15, 2012 at 4:05
The AlphaThe Alpha
142k29 gold badges287 silver badges306 bronze badges
for just a standard the above solutions work, but if you are using datatables, you have to override the default datatatables.css settings and add the following code to custom css, In the code below row-select is the class that I added on datatables as shown in the html.
table.row-select.dataTable tbody td
{
cursor: pointer;
}
And you html will look as below:
<table datatable="" dt-options="dtOptions1" dt-columns="dtColumns1" class="table table-striped table-bordered table-hover row-select" id="datatable"></table>
answered Apr 14, 2016 at 13:30
RenuRenu
412 bronze badges
1
How do I change the cursor pointer to hand when my mouse goes over a <tr> in a <table>
<table class="sortable" border-style:>
<tr>
<th class="tname">Name</th><th class="tage">Age</th>
</tr>
<tr><td class="tname">Jennifer</td><td class="tage">24</td></tr>
<tr><td class="tname">Kate</td><td class="tage">36</td></tr>
<tr><td class="tname">David</td><td class="tage">25</td></tr>
<tr><td class="tname">Mark</td><td class="tage">40</td></tr>
</table>
asked Feb 15, 2012 at 4:01
Zeeshan RangZeeshan Rang
19.1k28 gold badges71 silver badges100 bronze badges
1
You can do this with CSS actually.
.sortable tr {
cursor: pointer;
}
Gary
3,7017 gold badges35 silver badges59 bronze badges
answered Feb 15, 2012 at 4:06
2
I’ve searched bootstrap styles a bit and found this:
[role=button]{cursor:pointer}
So I assume you can get what you want with:
<span role="button">hi</span>
answered Dec 12, 2015 at 18:27
4
The easiest way I’ve found is to add
style="cursor: pointer;"
to your tags.
answered Jun 14, 2012 at 17:58
Ira HermanIra Herman
2,7761 gold badge22 silver badges22 bronze badges
0
Add cursor: pointer to your css.
answered Feb 15, 2012 at 4:03
James MontagneJames Montagne
76.8k14 gold badges108 silver badges129 bronze badges
I added this to my style.css to manage cursor options:
.cursor-pointer {cursor: pointer;}
.cursor-crosshair {cursor: crosshair;}
.cursor-eresize {cursor: e-resize;}
.cursor-move {cursor: move;}
Michael M.
7,2306 gold badges14 silver badges34 bronze badges
answered Oct 15, 2014 at 8:59
xackoboxackobo
2412 silver badges4 bronze badges
1
Use the style cursor: pointer; in the CSS for the element you want the cursor to change on.
In your case, you would use (in your .css file):
.sortable {
cursor: pointer;
}
answered Feb 15, 2012 at 4:03
ChetanChetan
45.9k31 gold badges106 silver badges145 bronze badges
For compatibility with IE < 6 use this style in that order:
.sortable:hover {
cursor: pointer;
cursor: hand;
}
But remember that IE < 7 supports :hover pseudoclass only with <a> element.
answered Mar 18, 2014 at 12:37
UbiQueUbiQue
1,5011 gold badge12 silver badges10 bronze badges
Use the CSS cursor property like so:
<table class="sortable">
<tr>
<th class="tname">Name</th><th class="tage">Age</th>
</tr>
<tr style="cursor: pointer;"><td class="tname">Jennifer</td><td class="tage">24</td></tr>
<tr><td class="tname">Kate</td><td class="tage">36</td></tr>
<tr><td class="tname">David</td><td class="tage">25</td></tr>
<tr><td class="tname">Mark</td><td class="tage">40</td></tr>
</table>
Of course you should put the style into your CSS file and apply it to the class.
answered Feb 15, 2012 at 4:04
EverPresentEverPresent
1,89317 silver badges20 bronze badges
Example with styles inline:
<table>
<tr> <td style="cursor: pointer;">mouse me over: pointer</td> </tr>
<tr> <td style="cursor: wait;">mouse me over: wait</td> </tr>
<tr> <td style="cursor: zoom-in;">mouse me over: zoom-in</td> </tr>
</table>answered Jan 15, 2020 at 16:36
fmagnofmagno
1,36611 silver badges26 bronze badges
Using css
table tr:hover{cursor:pointer;} /* For all tables*/
table.sortable tr:hover{cursor:pointer;} /* only for this one*/
answered Feb 15, 2012 at 4:05
The AlphaThe Alpha
142k29 gold badges287 silver badges306 bronze badges
for just a standard the above solutions work, but if you are using datatables, you have to override the default datatatables.css settings and add the following code to custom css, In the code below row-select is the class that I added on datatables as shown in the html.
table.row-select.dataTable tbody td
{
cursor: pointer;
}
And you html will look as below:
<table datatable="" dt-options="dtOptions1" dt-columns="dtColumns1" class="table table-striped table-bordered table-hover row-select" id="datatable"></table>
answered Apr 14, 2016 at 13:30
RenuRenu
412 bronze badges
1