1957

আমি একটি তালিকা পেয়েছি এবং এর আইটেমগুলির জন্য আমার কাছে একটি ক্লিক হ্যান্ডলার রয়েছে:

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

আমি কীভাবে মাউস পয়েন্টারটিকে হ্যান্ড পয়েন্টার (যেমন একটি বোতামের উপর দিয়ে ঘুরে বেড়াতে) রূপান্তর করতে পারি? আমি তালিকার আইটেমগুলিতে ঘোরাফেরা করার সময় এখন পয়েন্টার একটি পাঠ্য নির্বাচনের পয়েন্টারে পরিণত হয়।

css

— user246114
সূত্র

52

এফওয়াইআই, আমি "জকিউয়ারি" মুছে ফেলা এবং "সিএসএস" যুক্ত করে আপনার প্রশ্নের প্রকৃতি এবং এর উত্তরটির আরও সঠিকভাবে প্রতিবিম্বিত করে আপনার প্রশ্নটি ফিরিয়ে দিয়েছি।

— ক্রিস্টোফার পার্কার

4

সিএসএসে উপলব্ধ একটি হাত এবং অন্যান্য আইকনগুলিতে কার্সার পরিবর্তন করার জন্য একটি ভাল রেফারেন্স তালিকা। javascriptkit.com/dhtmltutors/csscursors.shtml

— নীল

3

যদি জাভাস্ক্রিপ্টের সাথে যুক্ত একটি ক্লিক হ্যান্ডলার থাকে তবে মাউস পয়েন্টারটির জন্য সিএসএস জাভাস্ক্রিপ্টের সাথে যুক্ত করা উচিত। সুতরাং ব্যবহারকারীরা মনে করেন না যে তিনি বা সে যেখানে ক্লিক করা সম্ভব সেখানে এটি সম্ভব নয়। আমি এর জন্য একটি উপযুক্ত উত্তর যুক্ত করেছি ।

— ক্রিস্টোফ

আপনি কি চেষ্টা করেছেনcursor: grab

— 9-29 এ 16

3251

সময়ের সাথে আলোকে, যেমন লোকেদের উল্লেখ করেছেন, আপনি এখন নিরাপদে কেবল ব্যবহার করতে পারবেন:

li { cursor: pointer; }

— বিধ্বস্ত
সূত্র

212

এটি লক্ষ্য করার মতো যে, cursor: pointerআই 5.5 এর উপরে প্রতিটি কিছুর জন্য কেবলমাত্র করা যথেষ্ট ভাল: quirksmode.org/css/cursor.html

— ripper234

19

এটি মজাদার, কীভাবে পয়েন্টার! = কার্সার এবং হাত! = পয়েন্টার, বিভ্রান্তিতে আরও বেশি যোগ করে। :)

— হেনরিক এরল্যান্ডসন

22

লক্ষণীয় বিষয়, quirksmode.org/css/user-interface/cursor.html#note (পূর্বের মন্তব্যে রেফারেন্স করা) উল্লেখ করেছে যে হাত অবশ্যই পয়েন্টারের পরে আসতে হবে । আমি কেবল পয়েন্টারটি ব্যবহার করার পরামর্শ দিই - IE 5.5 আই 6 এর চেয়ে বেশি

— মারাত্মক

2

@ অ্যাডওয়ার্ড ব্ল্যাক এটির জন্য প্রয়োজনীয় বিজোড় ব্রাউজারগুলির জন্য প্রয়োজনীয় ছিল যেগুলি মান মেনে চলছিল না, উত্তরটি নতুনভাবে প্রতিফলিত করার জন্য অনেক আগে আপডেট করা হয়েছিল যা কেবল pointerএই প্রশ্নটি 5 বছরের পুরনো বিটিডব্লিউর বেশি।

— আরেন

প্রকৃতপক্ষে. আপনি যদি আইই 5 সামঞ্জস্যতা মোডে চালনা করেন, cursor:pointerতবুও কাজ করে। তাই যদি কখনও ব্যবহারের অজুহাত cursor:handথাকে তবে আর নেই।

— মিস্টার লিস্টার

335

এর জন্য ব্যবহার করুন 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>

স্নিপেট প্রসারিত করুন

— সন্তোষ খলসে
সূত্র

অফ টপিক, আপনি কোন জিআইএফ অ্যানিমেশনটি ব্যবহার করেছেন? অপেক্ষায় .. @ সন্তোষ খলসে

— fWd82

3

@ fWd82 চেক করুন শেয়ারএক্স - একটি জিআইএফ রেকর্ড করুন

— লুকানো

আমি অনুভব করেছি যে এটি কার্সরগুলির একটি দরকারী অনুস্মারক এবং একটি সরঞ্জাম হিসাবে কোডটি যুক্ত করেছে। উপরের কোডটির

— ক্রিস স্প্রেগ

1

দুর্দান্ত অ্যানিমেশন! @ fWd82 - আপনার পর্দার কোনও অঞ্চলের জিআইএফ রেকর্ড করার জন্যও পিক ভাল। github.com/phw/peek

— শরত্কাল লিওনার্ড

1

হা - এটি আশ্চর্যজনক! আপনাকে ধন্যবাদ @ সন্তোষ-খালসে

— সুফিনওয়াজ

156

আপনার এই জন্য jQuery প্রয়োজন হয় না, কেবল নিম্নলিখিত সিএসএস সামগ্রী ব্যবহার করুন:

li {cursor: pointer}

ও ভয়েল! কুশলী।

— ডেনিস 'আলফিয়াস' কাহুক
সূত্র

1

কুশলী? হুম ... আমি দেখছি আপনি সেখানে কী করেছেন, @ ড্যানিস-আলফিউস-কাহুক

— ওসিরিস

78

ব্যবহার করুন:

li:hover {
    cursor: pointer;
}

অন্যান্য বৈধ মান (যা handহয় না ) বর্তমান এইচটিএমএল স্পেসিফিকেশন জন্য দেখা যাবে এখানে ।

— অ্যালিস্টার
সূত্র

13

এক্ষেত্রে :hoverছদ্ম শ্রেণীর ব্যবহার কী তা আমি বুঝতে পারি না । যখন মাউস উপাদানটি হোভার করে না তখন কোনও আলাদা কার্সার নির্দিষ্ট করার কোনও সুবিধা আছে কি ? এছাড়াও আমি পড়লাম যা আই 6 তে li:hoverকাজ করে না।

— রবার্ট

1

আমি মনে করি :hoverকেবলমাত্র স্পষ্টতার জন্য, @ রবার্ট। আমি এমএসআইইর কোনও সংস্করণে সমর্থনের জন্য পরীক্ষা করতে পারছি না, দুঃখিত, তবে এটি কাজ না করলে অবাক হবে না! : পি

— অ্যালাস্টার

handএটি কাজ না করেও কেন শীর্ষ উত্তরে রয়েছে?

— কালো

1

@ অ্যাডওয়ার্ড ব্ল্যাক cursor: handসিএসএস স্পেকে নয়, হ্রাস করা হয়েছে। এটি ie5-6 যুগের মতো। শুধুমাত্র ব্যবহার করুন pointer।

— আমেরিকান

43

ব্যবহার

cursor: pointer;
cursor: hand;

যদি আপনি একটি ক্রসব্রোজার ফলাফল পেতে চান!

— biancardi
সূত্র

7

এটি 2018, এবং কার্সার: ক্রস ব্রাউজার বিকাশের জন্য এখন আর হাতের দরকার নেই?

— হারামোজ

41

সিএসএস:

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

— খাজা মোঃ শের ই আলম
সূত্র

7

এটি প্রশ্নের উত্তর নয়।

9

এটি সম্ভবত প্রশ্নের সরাসরি উত্তর নয় তবে এটি একটি খুব ভাল গাইডলাইন। যাইহোক ধন্যবাদ!

— চিচারনকো

20

আমি মনে করি জাভাস্ক্রিপ্ট উপলব্ধ থাকলে কেবলমাত্র হাত / পয়েন্টার কার্সারটি দেখানো স্মার্ট হবে। তাই লোকেরা এমন কোনও কিছুতে ক্লিক করতে পারে যে অনুভূতি থাকবে না যা ক্লিকযোগ্য নয়।

আপনি জাভাস্ক্রিপ্ট লিবারি jQuery ব্যবহার করতে পারে তা অর্জন করার জন্য সিএসএসের মতো উপাদানগুলিতে যুক্ত করতে

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

অথবা সরাসরি হ্যান্ডলারের সাথে এটি চেইন করুন।

বা যখন আধুনিকীকরণের সাথে সংমিশ্রণ <html class="no-js">ব্যবহৃত হয়, তখন সিএসএস দেখতে এই রকম হয়:

.js li { cursor: pointer; }

— ক্রিস্টোফ
সূত্র

18

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

— Xedret
সূত্র

17

কেবল সম্পূর্ণতার জন্য:

cursor: -webkit-grab;

এটি কোনও হাত দেয়, যখন আপনি কোনও চিত্রের দর্শনকে চারদিকে ঘোরাচ্ছেন তখন আপনি জানেন know

আপনি jQuery এবং মাউসডাউন ব্যবহার করে দখল আচরণ অনুকরণ করতে চাইলে এটি বেশ কার্যকর ।

— কই নোক
সূত্র

16

সম্পূর্ণ ক্রস ব্রাউজারের জন্য, ব্যবহার করুন:

cursor: pointer;
cursor: hand;

— এরিক টোভেন
সূত্র

12

কেবল এই জাতীয় কিছু করুন:

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>

স্নিপেট প্রসারিত করুন

— আলিরেজা
সূত্র

11

"মাউসচেঞ্জ" চিকিত্সা পেতে কোনও কিছু করতে সক্ষম হওয়ার জন্য, আপনি একটি সিএসএস ক্লাস যুক্ত করতে পারেন:

.mousechange:hover {
  cursor: pointer;
}

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

স্নিপেট প্রসারিত করুন

আমি cursor:handএটি ব্যবহার করতে বলব না যেহেতু এটি কেবলমাত্র ইন্টারনেট এক্সপ্লোরার 5.5 এবং নীচে বৈধ ছিল এবং ইন্টারনেট এক্সপ্লোরার 6 উইন্ডোজ এক্সপি (2002) এর সাথে এসেছিল। লোকেরা কেবল তখনই আপগ্রেড করার ইঙ্গিত পাবে যখন তাদের ব্রাউজার তাদের জন্য কাজ করা বন্ধ করে দেয়। অতিরিক্তভাবে, ভিজ্যুয়াল স্টুডিওতে এটি প্রবেশের রেখাটিকে লাল করে দেবে। এটি আমাকে বলে:

বৈধকরণ (সিএসএস 3.0): "হাত" "কার্সর" বৈশিষ্ট্যের জন্য একটি বৈধ মান নয়

— vapcguy
সূত্র

10

ul li:hover{
   cursor: pointer;
}

— user3776645
সূত্র

9

অন্যান্য সমস্ত প্রতিক্রিয়াগুলির মধ্যে স্ট্যান্ডার্ড সিএসএস পয়েন্টারটি ব্যবহার করার পরামর্শ দেওয়া হয় তবে দুটি পদ্ধতি রয়েছে:

cursor:pointer;উপাদানগুলিতে সিএসএস সম্পত্তি প্রয়োগ করুন । (কার্সার যখন কোনও বোতামের উপর দিয়ে যায় তখন এটি ডিফল্ট স্টাইল)
cursor:url(pointer.png);আপনার পয়েন্টারের জন্য একটি কাস্টম গ্রাফিক ব্যবহার করে CSS সম্পত্তি প্রয়োগ করুন । আপনি যদি সমস্ত প্ল্যাটফর্মগুলিতে ব্যবহারকারীর অভিজ্ঞতা অভিন্ন (তা ব্রাউজার / ওএসের পরিবর্তে আপনার পয়েন্টার কার্সারটি কেমন দেখতে হবে তা স্থির করার পরিবর্তে) এটি নিশ্চিত করতে চাইলে এটি আরও আকাঙ্ক্ষিত হতে পারে। নোট করুন যে গৌণ ইউআরএল বা অন্য কোনও বিকল্পের সাথে ইমেজ না পাওয়া গেলে ফ্যালব্যাক বিকল্পগুলি যুক্ত করা যেতে পারেcursor:url(pointer.png,fallback.png,pointer);

অবশ্যই এগুলি তালিকার আইটেমগুলিতে এই পদ্ধতিতে li{cursor:pointer;}শ্রেণি .class{cursor:pointer;}হিসাবে বা প্রতিটি উপাদানটির শৈলীর বৈশিষ্ট্যের জন্য একটি মান হিসাবে প্রয়োগ করা যেতে পারে style="cursor:pointer;"।

— অ্যান্ড্রু
সূত্র

8

ব্যবহার করুন:

ul li:hover{
   cursor: pointer;
}

আরও মাউস ইভেন্টের জন্য, সিএসএস কার্সার সম্পত্তি পরীক্ষা করুন ।

— মাসউদ মোস্তামন্দী
সূত্র

সদৃশ উত্তর। ব্যবহারকারী3776645 দ্বারা 21 ডিসেম্বর, 2014 তারিখে অন্য উত্তরের লিঙ্কটি সম্পাদনা হিসাবে যুক্ত করা উচিত ছিল।

— vapcguy

5

আপনি নিম্নলিখিতগুলির মধ্যে একটি ব্যবহার করতে পারেন:

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>

স্নিপেট প্রসারিত করুন

— উইলি উইঙ্কা
সূত্র

3

আপনি নীচের কোডটি ব্যবহার করতে পারেন:

li:hover { cursor: pointer; }

— ক্যাপ্টেন জে কে
সূত্র

3

একটি মৌলিক হাত প্রতীক জন্য:

চেষ্টা

cursor: pointer

আপনি যদি কোনও আইটেম টানতে চান এবং কোনও আইটেম টেনে নিয়ে যান, চেষ্টা করুন:

cursor: grab

— নলন মধেশ্বরন
সূত্র

3

আপনি নিম্নলিখিত শৈলীটি ব্যবহার করতে পারেন:

li {
    cursor: grabbing;
}

— অঙ্কিত মিসরা
সূত্র

2

একটি এইচটিএমএল হ্যাক ব্যবহার করে

দ্রষ্টব্য: এটি খারাপ অনুশীলন হিসাবে বিবেচিত হওয়ায় এটি প্রস্তাবিত নয়

অ্যান্ট্রিবিউট যুক্ত অ্যাঙ্কর ট্যাগে সামগ্রী মোড়ানো এঙ্কর বৈশিষ্ট্যগুলির পার্শ্ব প্রতিক্রিয়া (সিএসএস দিয়ে সংশোধিত) এর সাথে সম্পত্তির hrefস্পষ্টভাবে প্রয়োগ না করে কাজ করবে cursor: pointer;:

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

স্নিপেট প্রসারিত করুন

— রোহিত নায়ার
সূত্র

1

এটি কাজ করে না । অ্যাঙ্কর ট্যাগগুলিতে কেবলমাত্র পয়েন্টার কার্সারটি আন্ডারলাইন এবং অন্য রঙের সাথে হ্রেফ থাকে।

— আরটিয়ার

1

"যখন কোনও ব্যবহারকারী কোনও তালিকা আইটেমের উপরে চলে যায় তখন আমি কীভাবে কার্সারটিকে একটি হাত করতে পারি?" - এই বিশেষ প্রশ্নের জন্য, এটি আছে। কিন্তু @ সান্দ্রোকো দ্বারা চিহ্নিত হিসাবে একটি ভাল অনুশীলন না।

— রোহিত নয়ার

1

নিম্নলিখিত পরীক্ষা করুন। আমি ডাব্লু 3 স্কুল থেকে পেয়েছি ।

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

— ওয়াই জয় সিএইচ। সিংহ
সূত্র

0

স্রেফ সিএসএস ব্যবহার করে কার্সার পয়েন্টারটি কাস্টমাইজ করতে পারেন

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

— xgqfrms
সূত্র

যখন ব্যবহারকারী কোনও তালিকা আইটেমের উপরে চলে যায় তখন কার্সারটিকে একটি হাত করুন

একটি এইচটিএমএল হ্যাক ব্যবহার করে

স্রেফ সিএসএস ব্যবহার করে কার্সার পয়েন্টারটি কাস্টমাইজ করতে পারেন