- css使用户在列表项上悬停时使 cursor 成为手形

我有一个列表,并且我的项目有一个点击处理程序:


<ul>


 <li>foo</li>


 <li>goo</li>


</ul>



如何将鼠标指针更改为手形指针( 当悬停在按钮上方时)? 现在指针变成一个文本选择指针,当我悬停在列表项上时。

时间:

正如人们提到的那样,随着时间的推移,你现在可以安全地使用:


li { cursor: pointer; }



用于 li


li:hover{


 cursor: pointer;


}



运行代码段选项后,查看更多 cursor 属性。

enter image description here


.auto { cursor: auto; }


.deafult { 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>

你不需要 jQuery,只需使用以下CSS内容:


li {cursor: pointer}



使用:


li:hover {


 cursor: pointer;


}



当前HTML规范的其他有效值( 哪个 hand) 可以在这里查看

用户


cursor: pointer;


cursor: hand;



如果你想要一个crossbrowser结果!

...