কার্সার ধরার জন্য সিএসএস (টেনে আনুন এবং ছেড়ে দিন)

Question

আমার একটি জাভাস্ক্রিপ্ট ওয়েব অ্যাপ্লিকেশন রয়েছে যেখানে পুরো পর্দাটি ঘুরিয়ে নেওয়ার জন্য ব্যবহারকারীর পটভূমি দখল করতে হবে। সুতরাং আমি যখন পটভূমিতে ঘুরে বেড়াচ্ছি তখন কার্সারটি বদলে যেতে চাই। -moz-grabএবং -moz-grabbingCSS এর এক্সিকিউটেবল-এর পাথ এই জন্য আদর্শ। অবশ্যই, তারা কেবল ফায়ারফক্সে কাজ করে ... অন্য ব্রাউজারগুলির জন্য কি সমতুল্য কার্সার রয়েছে? স্ট্যান্ডার্ড সিএসএস কার্সারের চেয়ে কি আমাকে কিছুটা বেশি কাস্টম করতে হবে?

Answer 1

আমি মনে করি আপনি যা করছেন তার জন্য moveসম্ভবত নিকটতম স্ট্যান্ডার্ড কার্সার মান হবে :

সরানো
ইঙ্গিত দেয় কিছু সরানো হয়।

Comments

আমি মুভ আইকনটি দেখেছি, ভেবেছি দখল আইকনটি আরও ভাল। তবে এখন আপনি ডাব্লু 3 সি নির্দেশ করেছেন যে এই কার্সারটিকে "কিছু সরানো হয় তার ইঙ্গিত দেয়" এটি সর্বাধিক অর্থবোধ করে। ধন্যবাদ।

— এ।

@ অ্যাট: আপনি কমা-বিস্মৃত তালিকাতে একাধিক কার্সার নির্দিষ্ট করতে পারেন এবং ব্যবহারকারী এজেন্টটিকে এটি বোঝার প্রথমটি ব্যবহার করা উচিত। সুতরাং আপনি-মোজ * টি ব্যবহার করতে পারেন এবং ফ্যালব্যাক হিসাবে "মুভ" করতে পারেন।

— মিউ খুব ছোট

@ মাইস্টোশোর্ট আপনি কি নিশ্চিত যে কমা-তালিকা এখনও কাজ করে? আমি cursor:move; cursor:-webkit-grab; cursor:-moz-grab; cursor:grab;সর্বাধিক পছন্দের সাথে ব্যবহার করছি ।

— বব স্টেইন

@ ববস্টাইন-ভিজিবোন: আমি মনে করি কয়েক বছর আগে সেখানে কিছুটা বিভ্রান্তি ঘটতে পারে। আমি যতদূর জানি কমা-তালিকা কাজ করে আপনি নির্দিষ্ট করছি একাধিক ফরম্যাটের পছন্দ cursor: url(example.svg#linkcursor), url(hyper.cur), pointerএকাধিক সম্ভাব্য মান বদলে। আমি মনে করি আপনার প্রয়োজনীয় পদ্ধতির প্রয়োজন হতে পারে।

— মিউ খুব ছোট

Answer 2

এই প্রশ্নটি দেখে অন্য কেউ যদি হোঁচট খায় তবে সম্ভবত আপনি যা খুঁজছিলেন তা হ'ল:

.grabbable {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

 /* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

Comments

কোনও কারণে 'দখল' কেবল তখনই প্রদর্শিত হয় যখন আমি মাউসটি প্রকাশ করি। কোন ধারণা কেন এটি?

— জোনা

@ জোনা আমার অনুমান যে আপনি যে grabbableকোনও উপাদানকে ধরতে পারবেন তাতে ক্লাস যুক্ত করেন নি এবং ক্লাসটি টেনে আনা হলে আপনি টগল করছেন।

— এমিল বার্গারন

চমৎকার বর্ধিত উত্তর, অতিরিক্ত "দখল" বিট যোগ করার জন্য ধন্যবাদ। চমৎকার স্পর্শ. :)

— স্কটল

এই সমাধানে যে কেউ সমস্যায় পড়ছেন, তার জন্য আমাকে উপরের উদাহরণে প্লেইন সিলেক্টরের চেয়ে grabকার্সার সেট করতে হবে । :hover.grabbable:hover

— মার্কাস অমলথিয়া ম্যাগনসন

@ জোনা আমার ক্ষেত্রে <ul>পরিবর্তে পিতামাতার সাথে এই শৈলীগুলি যুক্ত <li>করে সমস্যার সমাধান করেছেন

— আর্থার তারাসভ

Answer 3

সিএসএস 3 grab এবং grabbingএখন মান অনুমতি দেওয়া হয় cursor। কাস্টম কার্সার ফাইলগুলি সহ ক্রস-ব্রাউজারের সামঞ্জস্য 3 এর জন্য বেশ কয়েকটি ফলব্যাক সরবরাহ করার জন্য , একটি সম্পূর্ণ সমাধান এর মতো দেখায়:

.draggable {
    cursor: move; /* fallback: no `url()` support or images disabled */
    cursor: url(images/grab.cur); /* fallback: Internet Explorer */
    cursor: -webkit-grab; /* Chrome 1-21, Safari 4+ */
    cursor:    -moz-grab; /* Firefox 1.5-26 */
    cursor:         grab; /* W3C standards syntax, should come least */
}

.draggable:active {
    cursor: url(images/grabbing.cur);
    cursor: -webkit-grabbing;
    cursor:    -moz-grabbing;
    cursor:         grabbing;
}

2019-10-07 আপডেট করুন:

.draggable {
    cursor: move; /* fallback: no `url()` support or images disabled */
    cursor: url(images/grab.cur); /* fallback: Chrome 1-21, Firefox 1.5-26, Safari 4+, IE, Edge 12-14, Android 2.1-4.4.4 */
    cursor: grab; /* W3C standards syntax, all modern browser */
}

.draggable:active {
    cursor: url(images/grabbing.cur);
    cursor: grabbing;
}

Comments

আপনার পোস্ট J.Steve এর সদৃশ

@ ব্যবহারকারী 2230470 এটি দুটি গুরুত্বপূর্ণ পয়েন্টে পৃথক: প্রথমত, এটি ব্রাউজারগুলিকে সমর্থন করে না grabতবে কার্সার চিত্রগুলির জন্য একটি কার্সার চিত্র সরবরাহ করে। দ্বিতীয়ত, বিক্রেতারের পূর্বনির্ধারিত মানগুলির পরে মান সিনট্যাক্স রাখা ভাল অনুশীলন ।

— ভোলকার ই।

সত্যিই ?! কিভাবে? এছাড়াও, যেখানে আমি এর অনুরূপ স্ট্যান্ডার্ড অনুশীলনগুলি সম্পর্কে আরও তথ্য পেতে পারি।

@ ব্যবহারকারী 2230470 - কারণ এমন ক্ষেত্রে যেখানে ব্রাউজার 2 টি আচরণকে সমর্থন করে যেখানে প্রিফিক্সড স্ট্যান্ডার্ডের চূড়ান্তকরণের আগে সামান্য প্রয়োগ করা হয়েছে (এবং তাই ভিন্নভাবে কাজ করতে পারে) আপনি এটি স্ট্যান্ডার্ডটি ব্যবহার করতে চান ... এবং যে কোনও সংজ্ঞা আসে না কেন শেষটি ব্রাউজারটি ব্যবহার করবে will সুতরাং স্ট্যান্ডার্ডটি শেষ হওয়া উচিত should

— জিম্বো জনি

হয় images/grab.curযে আমি আমার ওয়েব সার্ভারে হোস্ট প্রয়োজন একটি চিত্রের জন্য একটি URL এর উদাহরণ, অথবা যে কিছু যাদু ইন্টারনেট জিনিস?

— জন z

Answer 4

সিএসএস কার্সারের চেয়ে "বেশি কাস্টম" অর্থ কোনও প্রকারের একটি প্লাগইন, তবে আপনি সিএসএস ব্যবহার করে আপনার নিজস্ব কার্সারকে পুরোপুরি নির্দিষ্ট করতে পারেন। আমি মনে করি এই তালিকাটিতে আপনি যা চান তা রয়েছে:

.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: grab;}
.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(https://www.w3schools.com/cssref/myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}

<h1>The cursor Property</h1>
<p>Hover mouse over each to see how the cursor looks</p>

<p class="alias">cursor: alias</p>
<p class="all-scroll">cursor: all-scroll</p>
<p class="auto">cursor: auto</p>
<p class="cell">cursor: cell</p>
<p class="context-menu">cursor: context-menu</p>
<p class="col-resize">cursor: col-resize</p>
<p class="copy">cursor: copy</p>
<p class="crosshair">cursor: crosshair</p>
<p class="default">cursor: default</p>
<p class="e-resize">cursor: e-resize</p>
<p class="ew-resize">cursor: ew-resize</p>
<p class="grab">cursor: grab</p>
<p class="grabbing">cursor: grabbing</p>
<p class="help">cursor: help</p>
<p class="move">cursor: move</p>
<p class="n-resize">cursor: n-resize</p>
<p class="ne-resize">cursor: ne-resize</p>
<p class="nesw-resize">cursor: nesw-resize</p>
<p class="ns-resize">cursor: ns-resize</p>
<p class="nw-resize">cursor: nw-resize</p>
<p class="nwse-resize">cursor: nwse-resize</p>
<p class="no-drop">cursor: no-drop</p>
<p class="none">cursor: none</p>
<p class="not-allowed">cursor: not-allowed</p>
<p class="pointer">cursor: pointer</p>
<p class="progress">cursor: progress</p>
<p class="row-resize">cursor: row-resize</p>
<p class="s-resize">cursor: s-resize</p>
<p class="se-resize">cursor: se-resize</p>
<p class="sw-resize">cursor: sw-resize</p>
<p class="text">cursor: text</p>
<p class="url">cursor: url</p>
<p class="w-resize">cursor: w-resize</p>
<p class="wait">cursor: wait</p>
<p class="zoom-in">cursor: zoom-in</p>
<p class="zoom-out">cursor: zoom-out</p>

উত্স: সিএসএস কার্সার সম্পত্তি @ ডাব্লু 3 স্কুলস

Answer 5

আপনি নিজের কার্সার তৈরি করতে পারেন এবং cursor: url('path-to-your-cursor');এটি ব্যবহার করে কার্সার হিসাবে সেট করতে পারেন , বা ফায়ারফক্সের সন্ধান এবং তাদের অনুলিপি করতে পারেন (বোনাস: প্রতিটি ব্রাউজারে একটি দুর্দান্ত ধারাবাহিক চেহারা) look

Answer 6

আমি দেরিতে হতে পারে তবে আপনি নিম্নলিখিত কোডটি চেষ্টা করতে পারেন, যা আমার জন্য ড্রাগ এবং ড্রপের জন্য কাজ করেছে।

.dndclass{
    cursor: url('../images/grab1.png'), auto; 

}

.dndclass:active {
    cursor: url('../images/grabbing1.png'), auto;
}

আপনি উপরের ইউআরএলটিতে নীচের চিত্রগুলি ব্যবহার করতে পারেন। নিশ্চিত করুন এটি একটি পিএনজি স্বচ্ছ চিত্র। যদি তা না হয় তবে গুগল থেকে একটি ডাউনলোড করুন।

Answer 7

বদ্ধ হাত কার্সারটি 16x16 নয়। আপনার যদি একই মাত্রায় প্রয়োজন হয় তবে এখানে আপনার উভয়টি 16x16 পিক্সে রয়েছে

বা যদি আপনার মূল কার্সার প্রয়োজন হয়:

https://www.google.com/intl/en_ALL/mapfiles/openhand.cur https://www.google.com/intl/en_ALL/mapfiles/closedhand.cur