මට ලැයිස්තුවක් ඇත, එහි අයිතම සඳහා ක්ලික් කරන්නෙකු ඇත:

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

මූසික දර්ශකය අත් පොයින්ටරයක් ​​ලෙස වෙනස් කරන්නේ කෙසේද (බොත්තමක් උඩින් සැරිසැරීමේදී වැනි)? මම ලැයිස්තු අයිතමවල සැරිසරන විට දැන් දර්ශකය පෙළ තේරීමේ දර්ශකයක් බවට පත්වේ.

කාලයත් සමඟ මිනිසුන් සඳහන් කළ පරිදි ඔබට දැන් ආරක්ෂිතව භාවිතා කළ හැකිය:

li { cursor: pointer; }

මේ සඳහා භාවිතා කරන්න li:

li:hover {
    cursor: pointer;
}

ස්නිපෙට් විකල්පය ධාවනය කිරීමෙන් පසු උදාහරණ සමඟ තවත් කර්සර ගුණාංග බලන්න:

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

මේ සඳහා ඔබට jQuery අවශ්‍ය නොවේ, පහත දැක්වෙන CSS අන්තර්ගතය භාවිතා කරන්න:

li {cursor: pointer}

හා වොයිලා! හැන්ඩි.

භාවිත:

li:hover {
    cursor: pointer;
}

(අනෙකුත් වලංගු අගයන් handවේ නොහැකි වත්මන් HTML පිරිවිතර සඳහා) දැකිය හැකි මෙහි .

භාවිත

cursor: pointer;
cursor: hand;

ඔබට හරස් බ්‍රව්සර් ප්‍රති result ලයක් ලබා ගැනීමට අවශ්‍ය නම්!

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

ඔබට කර්සරය රූපයක් විය හැකිය:

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

ජාවාස්ක්‍රිප්ට් ඇති විට පමණක් අත් / දර්ශක කර්සරය පෙන්වීම බුද්ධිමත් යැයි මම සිතමි. එබැවින් ක්ලික් කළ නොහැකි දෙයක් මත ක්ලික් කළ හැකිය යන හැඟීම මිනිසුන්ට නැත.

එය සාක්ෂාත් කර ගැනීම සඳහා ඔබට ජාවාස්ක්‍රිප්ට් ලිබරි jQuery භාවිතා කර CSS වැනි මූලද්‍රව්‍යයට එකතු කළ හැකිය

$("li").css({"cursor":"pointer"});

නැතහොත් එය ක්ලික් කරන්න හසුරුවන්නාට කෙලින්ම සම්බන්ධ කරන්න.

වන විට හෝ modernizer සංයෝජනය <html class="no-js">භාවිතා වන අතර, මෙම CSS මේ වගේ බලන:

.js li { cursor: pointer; }

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

සම්පූර්ණත්වය සඳහා:

cursor: -webkit-grab;

රූපයක් දර්ශනය වටා ගෙන යන විට ඔබ දන්නා අතක් ද එය ලබා දෙයි.

ඔබට jQuery සහ මූස්ඩවුන් භාවිතා කර උදුරා ගැනීමේ හැසිරීම අනුකරණය කිරීමට අවශ්‍ය නම් එය බෙහෙවින් ප්‍රයෝජනවත් වේ .

සම්පූර්ණ හරස් බ්‍රව්සරය සඳහා, භාවිතා කරන්න:

cursor: pointer;
cursor: hand;

සරලවම මේ වගේ දෙයක් කරන්න:

li { 
  cursor: pointer;
}

එය ක්‍රියාත්මක වන ආකාරය බැලීමට මම එය ඔබගේ කේතයට යොදමි:

li {
  cursor: pointer;
}

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

සටහන: එසේම එපා ඔබ අභිරුචි කර්සරය සමග මොන යම් හෝ අත කර්සරය ඇති කළ හැකි අතර, එය ඔබට උදාහරණයක් මේ වගේ ඇරගෙන අත අයිකනය නිර්මාණය කළ හැක අමතක:

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>

ඕනෑම දෙයක් "මූසික හුවමාරුව" ලබා ගැනීමට හැකිවීම සඳහා, ඔබට CSS පන්තියක් එක් කළ හැකිය:

.mousechange:hover {
  cursor: pointer;
}

<span class="mousechange">Some text here</span>

cursor:handඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 5.5 සහ ඊට පහළ පමණක් වලංගු බැවින් භාවිතා කිරීමට මම නොකියමි. ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 6 වින්ඩෝස් එක්ස්පී (2002) සමඟ පැමිණියේය. යාවත්කාලීන කිරීම සඳහා ඉඟියක් මිනිසුන්ට ලැබෙනුයේ ඔවුන්ගේ බ්‍රව්සරය ඔවුන් වෙනුවෙන් වැඩ කිරීම නැවැත්වූ විට පමණි. මීට අමතරව, විෂුවල් ස්ටුඩියෝ හි එය රතු පාටින් එම ප්‍රවේශය අවධාරණය කරයි. එය මට කියයි:

වලංගුකරණය (CSS 3.0): “අත” යනු “කර්සරය” දේපල සඳහා වලංගු අගයක් නොවේ

ul li:hover{
   cursor: pointer;
}

අනෙක් සියලුම ප්‍රතිචාර මඟින් සම්මත CSS දර්ශකය භාවිතා කිරීමට යෝජනා කරයි, කෙසේ වෙතත් ක්‍රම දෙකක් තිබේ:

1. cursor:pointer;මූලද්රව්ය සඳහා CSS දේපල යොදන්න . (කර්සරය බොත්තමක් මත සැරිසරන විට මෙය සුපුරුදු විලාසය වේ.)

2. cursor:url(pointer.png);ඔබේ දර්ශකය සඳහා අභිරුචි ග්‍රැෆික් භාවිතයෙන් CSS දේපල යොදන්න. සියලු වේදිකාවල පරිශීලක අත්දැකීම සමාන බව සහතික කිරීමට ඔබට අවශ්‍ය නම් මෙය වඩාත් යෝග්‍ය වේ (බ්‍රව්සරයට / මෙහෙයුම් පද්ධතියට ඔබේ දර්ශක කර්සරය කෙබඳු විය යුතුද යන්න තීරණය කිරීමට ඉඩ දෙනවා වෙනුවට). ද්විතීයික යූආර්එල් හෝ වෙනත් විකල්ප ඇතුළුව රූපය සොයාගත නොහැකි වූ විට ආපසු හැරවීමේ විකල්ප එකතු කළ හැකි බව සලකන්නcursor:url(pointer.png,fallback.png,pointer);

ඇත්ත වශයෙන්ම මේවා ලැයිස්තු අයිතමවලට මේ ආකාරයෙන් li{cursor:pointer;}, පන්තියක් .class{cursor:pointer;}ලෙස හෝ එක් එක් මූලද්‍රව්‍යයේ ශෛලීය ගුණාංගයේ අගයක් ලෙස යොදා ගත හැකිය style="cursor:pointer;".

භාවිත:

ul li:hover{
   cursor: pointer;
}

තවත් මූසික සිදුවීම් සඳහා, CSS කර්සරයේ දේපල පරීක්ෂා කරන්න .

ඔබට පහත සඳහන් දේවලින් එකක් භාවිතා කළ හැකිය:

li:hover
{
 cursor: pointer;
}

හෝ

li
{
 cursor: pointer;
}

වැඩ කරන උදාහරණය 1:

    li:hover
    {
     cursor: pointer;
    }

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

වැඩ කරන උදාහරණ 2:

    li
    {
     cursor: pointer;
    }

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

ඔබට පහත කේතය භාවිතා කළ හැකිය:

li:hover { cursor: pointer; }

මූලික අත් සංකේතයක් සඳහා:

උත්සාහ කරන්න

cursor: pointer 

ඔබට යම් අයිතමයක් ඇද එය අතහැර දැමීම වැනි අත් සංකේතයක් අවශ්‍ය නම්, උත්සාහ කරන්න:

cursor: grab

ඔබට පහත ශෛලිය භාවිතා කළ හැකිය:

li {
    cursor: grabbing;
}

HTML වැටක් භාවිතා කිරීම

සටහන: මෙය නරක පුරුද්දක් ලෙස සලකන බැවින් මෙය නිර්දේශ නොකරයි

hrefගුණාංගයක් අඩංගු නැංගුරම් ටැගයක අන්තර්ගතය එතීම cursor: pointer;නැංගුරම් ගුණාංගවල අතුරු ප්‍රති with ල සමඟ දේපල පැහැදිලිව අදාළ නොකර ක්‍රියා කරයි (CSS සමඟ සංශෝධනය කර ඇත):

<a href="#" style="text-decoration: initial; color: initial;"><div>This is bad practice, but it works.</div></a>

පහත සඳහන් දෑ පරීක්ෂා කරන්න. මම එය W3 පාසැල් වලින් ලබා ගනිමි .

<!DOCTYPE html>
<html>
    <head>
        <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>
    </head>

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

කර්සරය දර්ශකය අභිරුචිකරණය කිරීමට CSS භාවිතා කිරීම

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

/* 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;

නිරූපණය

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

hand.cur රූපය

li:hover{
   cursor: url("../icons/hand.cur"), pointer;
}