Câu hỏi Làm thế nào tôi có thể làm cho con trỏ một bàn tay khi người dùng di chuột qua một mục danh sách?


Tôi có một danh sách và tôi có một trình xử lý nhấp chuột cho các mục của nó:

<ul>
  <li>foo</li>
  <li>goo</li>
</ul>

Làm cách nào để thay đổi con trỏ chuột thành con trỏ tay (như khi di chuột qua nút)? Ngay bây giờ con trỏ biến thành một con trỏ chọn văn bản khi tôi di chuột qua các mục danh sách.


1540
2018-06-21 19:45


gốc


FYI, tôi đã gắn thẻ lại câu hỏi của bạn bằng cách xóa "jquery" và thêm "css" để phản ánh chính xác hơn bản chất câu hỏi của bạn và câu trả lời cho câu hỏi đó. - Christopher Parker
Một danh sách tham khảo tốt để thay đổi con trỏ thành bàn tay và các biểu tượng khác có sẵn trong css. javascriptkit.com/dhtmltutors/csscursors.shtml - Neil
Nếu có trình xử lý nhấp chuột được thêm bằng JavaScript, thì css cho con trỏ chuột sẽ được thêm bằng JavaScript. Vì vậy, người dùng không nghĩ rằng họ có thể nhấp vào nơi không thể. Tôi đã thêm một câu trả lời cho điều này. - Christoph


Các câu trả lời:


Trong ánh sáng của thời gian trôi qua, như mọi người đã đề cập, bây giờ bạn có thể an toàn chỉ cần sử dụng:

li { cursor: pointer; }

2611
2018-06-21 19:50



Cần lưu ý rằng chỉ cần làm cursor: pointer đủ tốt cho mọi thứ trên IE 5.5: quirksmode.org/css/cursor.html - ripper234
Thật là buồn cười như thế nào con trỏ! = Con trỏ và bàn tay! = Con trỏ, thêm nhiều hơn nữa vào sự nhầm lẫn. :) - Henrik Erlandsson
Chú ý, quirksmode.org/css/user-interface/cursor.html#note (tham chiếu trong một bình luận trước đó) nói rằng tay phải đến sau con trỏ. Tôi khuyên bạn nên sử dụng chỉ con trỏ - IE 5.5 là chết hơn so với IE 6. - Iiridayn
@EdwardBlack nó được sử dụng để được yêu cầu cho các trình duyệt lẻ không tuân thủ các tiêu chuẩn, câu trả lời đã được cập nhật từ lâu để phản ánh cách mới đơn giản chỉ là pointer câu hỏi này là hơn 5 năm btw. - Aren
những gì về IE4? ;) - Kamil Kiełczewski


Bạn không yêu cầu jQuery cho điều này, chỉ cần sử dụng css sau:

li {cursor: pointer}

Và Voila! Tiện dụng.


137
2018-06-21 19:47





Sử dụng cho li

li:hover{
 cursor: pointer;
}

Xem thêm thuộc tính con trỏ với ví dụ sau khi chạy tùy chọn đoạn mã.

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>


128
2018-01-04 11:21



Tuyệt vời ! Rất hữu dụng :) - Valentin Genevrais
Tắt chủ đề, Sử dụng phần mềm nào bạn đã thực hiện hoạt ảnh gif đó? Đang chờ .. @ Santosh Khalse - fWd82
@ fWd82 kiểm tra ShareX - ghi lại một gif - Hidden


li:hover {
    cursor: pointer;
}

Các giá trị hợp lệ khác (mà hand Là không phải) cho thông số HTML hiện tại có thể xem đây.


70
2018-01-07 11:50



Tôi không hiểu việc sử dụng :hover lớp giả là trong trường hợp này. Có lợi thế nào khi chỉ định một con trỏ khác khi chuột không không phải di chuột qua phần tử? Tôi cũng đọc li:hover không hoạt động trong IE6. - Robert
tôi giả sử :hover chỉ dành cho tính đặc hiệu, @Robert. Tôi không thể kiểm tra sự hỗ trợ trong bất kỳ phiên bản nào của MSIE, xin lỗi, nhưng nó sẽ không làm tôi ngạc nhiên nếu nó không hoạt động! : P - Alastair
tại sao lại là hand trong câu trả lời hàng đầu, mặc dù nó không hoạt động? - Black
@EdwardBlack cursor: hand không được chấp nhận và không có trong thông số css. nó giống như từ thời đại ie5-6. chỉ sử dụng pointer. - northamerican


sử dụng

cursor: pointer;
cursor: hand;

nếu bạn muốn có một kết quả crossbrowser!


37
2017-10-27 07:34



Đây là năm 2018 và con trỏ: tay không còn cần thiết để phát triển trình duyệt chéo phải không? - Haramoz


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; }

Bạn cũng có thể có con trỏ là một hình ảnh:

.img-cur {
   cursor: url(images/cursor.png), auto;
}

33
2017-09-11 07:51



Nó không phải là câu trả lời cho câu hỏi. - Benio
cảm ơn tất cả các giá trị có thể. - Wesam Alalem
điều này có lẽ không phải là câu trả lời trực tiếp cho câu hỏi nhưng đây là một hướng dẫn rất tốt. cảm ơn bằng cách này! - chitcharonko
Bạn có thể thử ở đây: w3schools.com/cssref/tryit.asp?filename=trycss_cursor - GKislin


Chủ đề này là nhận được ra khỏi bàn tay, nó nhanh chóng đi từ con trỏ đến các nhạc cụ dây. :)

Rất may Google luôn gửi cho tôi ở đây khi tôi cần lời nhắc nhanh, cho trình duyệt chéo hoàn chỉnh, sử dụng:

cursor: pointer;
cursor: hand;

16
2017-12-05 19:46





li:hover {cursor: hand; cursor: pointer;}

16
2018-06-05 21:52