জিকুয়েরি ব্যবহার করে পয়েন্টার থেকে আঙুলে কার্সারটি কীভাবে পরিবর্তন করবেন?


128

এটি সম্ভবত সত্যই সহজ, তবে আমি এর আগে কখনও করিনি। আপনি কীভাবে নিয়মিত পয়েন্টারের পরিবর্তে আপনার কর্সারটিকে আঙুলের (লিঙ্কগুলিতে ক্লিক করার জন্য) পছন্দ করেন?

এবং jQuery দিয়ে কীভাবে এটি করব যেহেতু আমি এটি এর জন্য ব্যবহার করছি।

উত্তর:


247
$('selector').css('cursor', 'pointer'); // 'default' to revert

আমি জানি যে এটি আপনার আসল প্রশ্নে বিভ্রান্ত হতে পারে তবে "আঙুল" কার্সারকে আসলে "পয়েন্টার" বলা হয়।

সাধারণ তীর কার্সারটি কেবল "ডিফল্ট"।

সমস্ত সম্ভাব্য ডিফল্ট পয়েন্টারটি ডেমো দেখায়


14
যদি সম্ভব হয় তবে এটি সিএসএসের মাধ্যমে করুন (একটি দিয়ে বলুন: নির্বাচক নির্বাচিত করুন) এবং পুরোপুরি jquery এড়ান।
দ্য হু

8
@ হু - শিওর, তবে যদি কার্সার পরিবর্তন করা কোনও কার্যকারিতার অংশ যা জেএসের উপর নির্ভর করে (ধরুন আপনার স্লাইডার রয়েছে) তবে আপনি যদি জেএস বন্ধ করে থাকেন তবে আপনি কার্সারটি পরিবর্তন করতে চাইবেন না।
পিটার আজতাই

3
আমি $('selector').css('cursor', 'auto');পয়েন্টার অঞ্চল থেকে মাউসটি সরানোর সময় স্টাইলটি ফালা করতে এটির সাথে একত্রে ব্যবহার করেছি । CSS ক্লাসগুলি ক্লিনার হতে পারে ... সহ $('...').addClass('someclass')এবং$('...').removeClass('someclass')
জোকুল

এটি যখন বডি ট্যাগে প্রয়োগ করা হয় এবং কাস্টম কার্সারে পরিবর্তিত হয়: $('body').css( 'cursor', 'url(openhand.cur) 4 4, move;' );এটি কাজ করে না বলে মনে হয়। আমি জানি না এটি jquery বা ক্রোমের মধ্যে কোনও বাগ। যদিও অন্য ব্রাউজারগুলিতে এটি পরীক্ষিত হয়নি।
jcfrei

16

হালনাগাদ! নতুন এবং উন্নত! @ গিটহাব !


অন্য নোটে, যদিও সেই পদ্ধতিটি সহজ, আমি একটি জিকুয়েরি প্লাগ তৈরি করেছি ( এই জেএসফিডেলে পাওয়া গেছে, কমেন্ট লাইনের মধ্যে কেবল অনুলিপি এবং পূর্ববর্তী কোড ) যা কোনও উপাদানকে কার্সার হিসাবে সহজ হিসাবে পরিবর্তন করে $("element").cursor("pointer")

কিন্তু এখানেই শেষ নয়! এখনই কাজ করুন এবং আপনি হাতের ক্রিয়াগুলি পাবেন positionএবং ishoverকোনও অতিরিক্ত চার্জ ছাড়াই! এটা ঠিক, 2 খুব সহজ কার্সার ফাংশন ... বিনামূল্যে!

তারা ডেমোতে দেখা হিসাবে সহজ কাজ:

$("h3").cursor("isHover"); // if hovering over an h3 element, will return true, 
    // else false
// also handy as
$("h2, h3").cursor("isHover"); // unless your h3 is inside an h2, this will be 
    // false as it checks to see if cursor is hovered over both elements, not just the last!
//  And to make this deal even sweeter - use the following to get a jQuery object
//       of ALL elements the cursor is currently hovered over on demand!
$.cursor("isHover");

এছাড়াও:

$.cursor("position"); // will return the current cursor position as { x: i, y: i }
    // at anytime you call it!

সরবরাহগুলি সীমিত, সুতরাং এখনই কাজ করুন!


7

আপনি কীভাবে নিয়মিত পয়েন্টারের পরিবর্তে আপনার কর্সারটিকে আঙুলের (লিঙ্কগুলিতে ক্লিক করার জন্য) পছন্দ করেন?

সিএসএস সম্পত্তি ব্যবহার করে এটি অর্জন করা খুব সহজ cursor, jQueryপ্রয়োজন নেই।

আপনি এ সম্পর্কে আরও পড়তে পারেন: CSS cursor propertyএবংcursor - CSS | MDN

.default {
  cursor: default;
}
.pointer {
  cursor: pointer;
}
<a class="default" href="#">default</a>

<a class="pointer" href="#">pointer</a>


1

এটি খুব সোজা এগিয়ে

এইচটিএমএল

<input type="text" placeholder="some text" />
<input type="button" value="button" class="button"/>
<button class="button">Another button</button>

jQuery এর

$(document).ready(function(){
  $('.button').css( 'cursor', 'pointer' );

  // for old IE browsers
  $('.button').css( 'cursor', 'hand' ); 
});

এটি জেএসফিডেলে দেখুন

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.