মোবাইল ব্রাউজারগুলিতে হোভার ইফেক্টগুলি অক্ষম করুন

Question

আমি একটি ওয়েবসাইট লিখছি যা ডেস্কটপ এবং ট্যাবলেট উভয় থেকেই ব্যবহার করা উচিত। যখন এটি একটি ডেস্কটপ থেকে পরিদর্শন করা হচ্ছে, আমি পর্দার ক্লিকযোগ্য অঞ্চলগুলি :hoverপ্রভাবগুলি (বিভিন্ন ব্যাকগ্রাউন্ডের রঙ ইত্যাদি) দিয়ে একটি ট্যাবলেট দিয়ে আলোকিত করতে চাই, কোনও মাউস নেই, তাই আমি কোনও হওর প্রভাব চাই না।

সমস্যাটি হ'ল আমি যখন ট্যাবলেটে কিছু ট্যাপ করি, তখন ব্রাউজারটিতে স্পষ্টতই কিছু ধরণের "অদৃশ্য মাউস কার্সার" থাকে যা এটি আমার সন্ধান করা অবস্থানে চলে যায় এবং পরে এটি সেখানে রেখে দেয় - তাই আমি যে জিনিসটি কেবল একটি আলোর সাথে ট্যাপ করেছি a আমি অন্য কিছু ট্যাপ না করা পর্যন্ত প্রভাবটিকে হোভার করুন।

আমি যখন মাউসটি ব্যবহার করছি তখন কীভাবে আমি হোভার এফেক্ট পেতে পারি, কিন্তু আমি টাচস্ক্রিন ব্যবহার করার সময় সেগুলি দমন করতে পারি?

যদি কেউ এর পরামর্শ দেওয়ার কথা ভাবছে তবে আমি ব্যবহারকারী-এজেন্ট স্নিফিং ব্যবহার করতে চাই না। একই ডিভাইসে টাচস্ক্রিন এবং মাউস উভয়ই থাকতে পারে (সম্ভবত আজ এত সাধারণ নয়, তবে ভবিষ্যতে আরও অনেক কিছু)। আমি ডিভাইসে আগ্রহী নই, আমি কীভাবে এটি বর্তমানে ব্যবহৃত হচ্ছে তা সম্পর্কে আগ্রহী: মাউস বা টাচস্ক্রিন।

আমি ইতিমধ্যে hooking চেষ্টা touchstart, touchmoveএবং touchendঘটনা এবং কলিং preventDefault()তাদের সব, যা দমন করা "অদৃশ্য মাউস কার্সার" কিছু সময় আছে; তবে আমি যদি দুটি পৃথক উপাদানের মধ্যে দ্রুত এবং পিছনে ট্যাপ করি তবে কয়েক টেপের পরে এটি "মাউস কার্সার" সরিয়ে নেওয়া এবং হোভার ইফেক্টগুলিকে আলোকিত করা শুরু করে - এটি আমার মতো preventDefaultসর্বদা সম্মানিত নয়। প্রয়োজন না হলে আমি আপনাকে বিবরণ দিয়ে বিরক্ত করব না - আমি এমনকি নিশ্চিত নই যে এটি গ্রহণের সঠিক পদ্ধতি; কারও যদি সহজ ফিক্স থাকে তবে আমি সব কান।

---

সম্পাদনা করুন: এটি বগ-স্ট্যান্ডার্ড সিএসএস সহ পুনরুত্পাদন করা যেতে পারে :hover, তবে এখানে রেফারেন্সের জন্য একটি দ্রুত প্রতিস্থাপন এখানে দেওয়া হয়েছে।

<style>
  .box { border: 1px solid black; width: 150px; height: 150px; }
  .box:hover { background: blue; }
</style>
<div class="box"></div>
<div class="box"></div>

যদি আপনি বাক্সগুলির মধ্যে দুটির উপরে মাউস করেন তবে এটি একটি নীল পটভূমি পাবেন যা আমি চাই। তবে আপনি যদি বাক্সগুলির যে কোনও একটিতে ট্যাপ করেন তবে এটি একটি নীল পটভূমিও পাবে, এটিই আমি রোধ করার চেষ্টা করছি।

আমি এখানে একটি নমুনা পোস্ট করেছি যা উপরেরটি করে এবং jQuery এর মাউস ইভেন্টগুলিও সন্ধান করে। আপনি যে টোকা ঘটনা এছাড়াও আগুন দেবেন দেখতে এটি ব্যবহার করতে পারেন mouseenter, mousemoveএবং mouseleave।

Comments

@ ব্লেন্ডার, আপনি প্রশ্নটি পড়েছেন? আমি ইতিমধ্যে ব্যাখ্যা করেছি যে কেন ব্যবহারকারী-এজেন্ট স্নিফিং একটি খারাপ পছন্দ।

— জো হোয়াইট

আরে জো, আপনি কি এর জন্য কোনও সমাধান খুঁজে পেয়েছেন?

— ইসমাতজান

আমি এই জাতীয় প্রশ্নের সন্ধান করছিলাম, খুশি হলাম!

— agpt

এই প্রশ্নটিও দেখুন, যা কেবল মোবাইল নয়, কোনও স্পর্শ-সক্ষম ডিভাইসগুলিতে হোভার অক্ষম করার সাথে সম্পর্কিত: স্ট্যাকওভারফ্লো

— ব্লেড

Answer 1

আমি আপনার প্রশ্ন থেকে এটি নিয়েছি যে আপনার হোভার ইফেক্টটি আপনার পৃষ্ঠার সামগ্রী পরিবর্তন করে। সেক্ষেত্রে আমার পরামর্শটি হ'ল:

• touchstartএবং উপর হোভার ইফেক্ট যুক্ত করুন mouseenter।
• উপর হোভার প্রভাবগুলি সরান mouseleave, touchmoveএবং click।

বিকল্পভাবে, আপনি নিজের পৃষ্ঠাটি সম্পাদনা করতে পারেন যে কোনও সামগ্রী পরিবর্তন নেই।

পটভূমি

কোনও মাউস অনুকরণের জন্য, ওয়েবকিট মোবাইলের মতো ব্রাউজারগুলি যদি কোনও স্পর্শ পর্দায় (আইপ্যাডের মতো) স্পর্শ করে এবং একটি আঙুল ছেড়ে দেয় তবে নিম্নলিখিত ইভেন্টগুলিতে ফায়ার করে (উত্স: html5rocks.com এ টাচ এবং মাউস ):

1. touchstart
2. touchmove
3. touchend
4. 300 মিমি বিলম্ব, যেখানে ব্রাউজার নিশ্চিত করে যে এটি ডাবল ট্যাপ নয়, এটি একটি একক ট্যাপ
5. mouseover
6. mouseenter
   • দ্রষ্টব্য : যদি কোনও mouseover, mouseenterবা mousemoveইভেন্ট পৃষ্ঠার সামগ্রী পরিবর্তন করে, নিম্নলিখিত ইভেন্টগুলি কখনই বরখাস্ত করা হয় না।
7. mousemove
8. mousedown
9. mouseup
10. click

ওয়েব ব্রাউজারকে মাউসের ইভেন্টগুলি এড়িয়ে যেতে বলা সহজভাবে বলে মনে হচ্ছে না।

সবচেয়ে খারাপ কী, যদি কোনও মাউসওভার ইভেন্ট পৃষ্ঠার সামগ্রীকে পরিবর্তন করে, ক্লিক ইভেন্টটি কখনই বরখাস্ত করা হয় না, যেমন সাফারি ওয়েব সামগ্রী গাইড - হ্যান্ডলিং ইভেন্টস , বিশেষত ওয়ান-ফিঙ্গার ইভেন্টগুলিতে figure.৪ চিত্রে ব্যাখ্যা করা হয়েছে । "সামগ্রী পরিবর্তন" হুবহু কী, ব্রাউজার এবং সংস্করণে নির্ভর করবে on আমি খুঁজে পেয়েছি যে আইওএস 7.0 এর জন্য, পটভূমির রঙে কোনও পরিবর্তন হয় না (বা আর নেই?)।

সমাধান ব্যাখ্যা

পুনরুদ্ধার করতে:

• touchstartএবং উপর হোভার ইফেক্ট যুক্ত করুন mouseenter।
• উপর হোভার প্রভাবগুলি সরান mouseleave, touchmoveএবং click।

মনে রাখবেন কোনও পদক্ষেপ নেই touchend!

এটি মাউস ইভেন্টগুলির জন্য পরিষ্কারভাবে কাজ করে: mouseenterএবং mouseleave(এর সামান্য উন্নত সংস্করণ mouseoverএবং mouseout) বরখাস্ত করা হয়, এবং হোভার যুক্ত এবং সরিয়ে ফেলুন।

ব্যবহারকারীর যদি আসলে clickলিঙ্ক থাকে তবে হোভার ইফেক্টটিও সরানো হবে। এটি নিশ্চিত করে যে ব্যবহারকারী যদি ওয়েব ব্রাউজারে পিছনের বোতামটি টিপেন তবে এটি সরানো হবে।

এটি টাচ ইভেন্টগুলির জন্যও কাজ করে: টাচ স্টার্টে হোভার ইফেক্ট যুক্ত হয়। এটি টাচেন্ডে '' 'নয়' '' মুছে ফেলা হয়েছে। এটি আবার যুক্ত করা হয় mouseenterএবং যেহেতু এটি কোনও সামগ্রী পরিবর্তন করে না (এটি ইতিমধ্যে যুক্ত করা হয়েছিল), clickইভেন্টটিও বরখাস্ত করা হয়েছে এবং ব্যবহারকারীকে আবার ক্লিক করার প্রয়োজন ছাড়াই লিঙ্কটি অনুসরণ করা হয়!

ব্রাউজারের একটি touchstartইভেন্টের মধ্যে যে 300 মিমি বিলম্ব হয় এবং clickএটি আসলে ভাল ব্যবহারে রাখা হয় কারণ হোভার এফেক্টটি এই অল্প সময়ের মধ্যে প্রদর্শিত হবে।

যদি ব্যবহারকারী ক্লিকটি বাতিল করার সিদ্ধান্ত নেন, আঙুলের একটি সরানো স্বাভাবিকের মতোই এটি করবে। সাধারণত, এটি কোনও সমস্যা যেহেতু কোনও mouseleaveইভেন্ট বরখাস্ত হয় না, এবং হোভার ইফেক্ট স্থির থাকে। ধন্যবাদ, এটিকে হোভার ইফেক্টটি সরিয়ে সহজেই ঠিক করা যায় touchmove।

এটাই!

মনে রাখবেন যে 300 মিমি বিলম্ব সরিয়ে নেওয়া সম্ভব, উদাহরণস্বরূপ ফাস্টক্লিক লাইব্রেরি ব্যবহার করে তবে এটি এই প্রশ্নের সুযোগের বাইরে।

বিকল্প সমাধান

নিম্নলিখিত বিকল্পগুলির সাথে আমি নিম্নলিখিত সমস্যাগুলি পেয়েছি:

• ব্রাউজার সনাক্তকরণ: ত্রুটিগুলির পক্ষে অত্যন্ত প্রবণ। ধরে নেওয়া যায় যে কোনও ডিভাইসে মাউস বা স্পর্শ রয়েছে, যখন স্পর্শটি প্রসারিত হয় তখন উভয়ের সংমিশ্রণটি আরও বেশি সাধারণ হয়ে উঠবে।
• সিএসএস মিডিয়া সনাক্তকরণ: কেবলমাত্র সিএসএস-এর সমাধান সম্পর্কে আমি সচেতন। তবুও ত্রুটিগুলির প্রবণতা এবং এখনও ধরে নেওয়া হয় যে কোনও ডিভাইসে মাউস বা স্পর্শ রয়েছে, যখন উভয়ই সম্ভব।
• ক্লিক ইভেন্টটি এতে অনুকরণ করুন touchend: এটি লিঙ্কটি ভুলভাবে অনুসরণ করবে, এমনকি যদি ব্যবহারকারীটি লিঙ্কটি ক্লিক করার উদ্দেশ্য না করে কেবল স্ক্রল বা জুম করতে চায়।
• মাউস ইভেন্টগুলিকে দমন করতে একটি ভেরিয়েবল ব্যবহার করুন: এটির মধ্যে একটি পরিবর্তনশীল সেট touchendহয় যদি পরবর্তী সময়ে মাউস ইভেন্টগুলিতে যদি সেই সময়ে অবস্থার পরিবর্তনগুলি প্রতিরোধ করতে হয় তবে এটি যদি একটি শর্ত হিসাবে ব্যবহৃত হয়। পরিবর্তন ইভেন্টটি ক্লিক ইভেন্টে পুনরায় সেট করা হয়। এই পৃষ্ঠায় ওয়াল্টার রোমানের উত্তর দেখুন। আপনি যদি সত্যিই স্পর্শ ইন্টারফেসগুলিতে হোভার ইফেক্টটি না চান তবে এটি একটি শালীন সমাধান। দুর্ভাগ্যক্রমে, যদি touchendকোনও কারণে অন্য কোনও কারণে গুলি ছড়িয়ে দেওয়া হয় এবং কোনও ক্লিক ইভেন্ট নিক্ষেপ করা হয় না (উদাহরণস্বরূপ ব্যবহারকারী স্ক্রলড বা জুমড হয়েছে), এবং পরবর্তীকালে একটি মাউসের সাথে লিঙ্কটি অনুসরণ করার চেষ্টা করছে (অর্থাত্ উভয় মাউস এবং স্পর্শ ইন্টারফেসের একটি ডিভাইসে) )।

আরও পড়া

• http://jsfiddle.net/macfreek/24Z5M/ । এই স্যান্ডবক্সে নিজের জন্য উপরের সমাধানটি পরীক্ষা করুন।
• http://www.macfreek.nl/mmory/ টাচ_আর_মাউস_উইথ_হোভার_এফেক্টস_ইন_এ_উভে_ব্রাউজার । এই একই উত্তর, আরও কিছুটা ব্যাকগ্রাউন্ড সহ।
• https://www.html5rocks.com/en/mobile/tou Chandmouse/ । সাধারণভাবে টাচ এবং মাউস সম্পর্কে html5rocks.com এ দুর্দান্ত পটভূমি নিবন্ধ।
• https://developer.apple.com/library/content/docamentation/AppleApplications/References/SafariWebContent/HandlingEvents/HandlingEvents.html । সাফারি ওয়েব সামগ্রী গাইড - হ্যান্ডলিং ইভেন্টগুলি। নির্দিষ্ট চিত্র 6.4 এ দেখুন, যা ব্যাখ্যা করে যে কোনও ঘটনা mouseoverবা mousemoveইভেন্টের সময় কোনও সামগ্রী পরিবর্তনের পরে আর কোনও ইভেন্ট বরখাস্ত করা হয় না ।

Comments

চমৎকার উত্তর. আমি আপনার নিজস্ব সমাধান তৈরি করতে শুরু করতে আপনার ফিডালটি ব্যবহার করেছি। স্পর্শটি অবশ্য মাঝে মাঝে প্রয়োজন। (যখন কোনও টাচমোভ চলবে না - উদাহরণস্বরূপ যখন ব্যবহারকারী নিজেই নথিটি সরিয়ে

— ফেলেন

গ্রেট উত্তর কিন্তু বেশিরভাগ ক্ষেত্রেই আমি ব্যবহার করার সুপারিশ করছি touchend পরিবর্তে এর touchstartবেশিরভাগ ক্ষেত্রেই অবিলম্বে triggering কর্ম এড়াতে যখন ব্যবহারকারী করার চেষ্টা করছে উপরের দিকে সোয়াইপ করুন-স্ক্রল বা Page Down। তবুও ঘটবে তবে

— এগুলি

Answer 2

আমি যখন মাউসটি ব্যবহার করছি তখন কীভাবে আমি হোভার এফেক্ট পেতে পারি, কিন্তু আমি টাচস্ক্রিন ব্যবহার করার সময় সেগুলি দমন করতে পারি?

এটিকে টাচস্ক্রিনের জন্য হোভার ইফেক্টগুলি দমন করার মতো এতটা ভাবেন না, তবে মাউস ইভেন্টগুলির জন্য হোভার ইফেক্ট যোগ করার হিসাবে?

আপনি যদি :hoverনিজের সিএসএসে প্রভাব রাখতে চান তবে আপনি বিভিন্ন মিডিয়ার জন্য বিভিন্ন স্টাইল নির্দিষ্ট করতে পারবেন:

@media screen { /* hover styles here */ } 

@media handheld { /* non-hover styles here */ }

দুর্ভাগ্যক্রমে প্রচুর মোবাইল ডিভাইস রয়েছে যা এটিকে এড়িয়ে চলে এবং কেবল স্ক্রিনের নিয়ম ব্যবহার করে। ভাগ্যক্রমে অনেক নতুন মোবাইল / ট্যাবলেট ব্রাউজারগুলি কিছু ফ্যানসিয়ার মিডিয়া ক্যোয়ারিকে সমর্থন করে:

@media screen and (max-width:800px) { /* non-hover styles here */ }

সুতরাং এমনকি যদি "স্ক্রিন" বা "হ্যান্ডহেল্ড" অংশটিকে উপেক্ষা করা হয় তবে "সর্বোচ্চ-প্রস্থ" আপনার জন্য কৌশলটি করবে। আপনি কেবল ধরে নিতে পারেন যে ৮০০ পিক্সেলের চেয়ে ছোট স্ক্রিনের যে কোনও কিছু অবশ্যই ট্যাবলেট বা ফোন হওয়া উচিত এবং হোভার ইফেক্টগুলি ব্যবহার করা উচিত নয়। বিরল ব্যবহারকারীরা যারা নিম্ন রেজোলিউশন ডিভাইসে মাউস ব্যবহার করছেন তারা হওর প্রভাবগুলি দেখতে পাবেন না তবে অন্যথায় আপনার সাইটটি ঠিক থাকবে।

মিডিয়া প্রশ্নে আরও পড়া? এই অনলাইন সম্পর্কে প্রচুর নিবন্ধ রয়েছে - এখানে একটি হ'ল: http://www.alistapart.com / icles

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

Comments

আমি কেবল মাউস ইভেন্টের জন্য হোভার ইফেক্ট যুক্ত করতে চাই। তবে স্পর্শ ইভেন্টগুলি মাউসের ইভেন্টগুলি অনুকরণ করে। যদি আমি স্পর্শ ইভেন্টগুলিকে হুক করি এবং কল করি preventDefault()যা মাঝে মাঝে মাউসের ইভেন্টগুলিকে দমন করে তবে আমি আমার প্রশ্নে বলেছি এটি নির্ভরযোগ্য নয়।

— জো হোয়াইট

মিডিয়া অনুসন্ধানগুলি হিসাবে, উইন্ডোজ 8 বেরিয়ে আসে এবং পিসিগুলিতে টাচ স্ক্রিন এবং ইঁদুর উভয়ই থাকে ? যদি ব্যবহারকারী মাউস নিয়ে ঘোরাফেরা করে তবে তারা মাউস কার্সারটি দেখতে পাবে এবং আমি হোভার ইফেক্টগুলি চাই; যদি তারা টাচস্ক্রিন দিয়ে ট্যাপ করে তবে আমি হোভার ইফেক্টগুলি চাই না। তবে আমি স্পর্শ এবং মাউসের মধ্যে পার্থক্য সনাক্ত করার একটি নির্ভরযোগ্য উপায় খুঁজে পাইনি।

— জো হোয়াইট

ওয়েল সম্ভবত ব্রাউজার বিকাশকারীরা স্পর্শ এবং মাউসযুক্ত ডিভাইসে ব্যবহারকারীদের প্রচুর সংখ্যা পেলে সনাক্তকরণটিকে আরও ধারাবাহিক করতে আরও বেশি প্রেরণা পাবেন। কিন্তু এখনকার জন্য? আমি পর্দার আকারের উপর ভিত্তি করে অনুমান করছিলাম, তবে অন্যান্য উত্তরগুলির মধ্যে অন্যান্য পরামর্শ রয়েছে। দুঃখিত আমি আর সাহায্য করতে পারি না।

— nnnnnn

Answer 3

আমি সাম্প্রতিক প্রজেক্টের জন্য নিম্নলিখিত জেএসটি লিখেছি, যা একটি ডেস্কটপ / মোবাইল / ট্যাবলেট সাইট ছিল যার প্রভাবগুলি হোভার এফ-টাচ হওয়া উচিত নয়।

mobileNoHoverStateনিচে মডিউল একটি পরিবর্তনশীল হয়েছে preventMouseover(প্রথমে হিসেবে ঘোষণা false), যে সেট করা হয় trueযখন একজন ব্যবহারকারী আগুন touchstartএকটি উপাদান এর ইভেন্টে, $target।

preventMouseoverএরপরে falseযখনই mouseoverইভেন্টটি চালিত হয় তখন এটি আবার সেট করা হয় যা কোনও ব্যবহারকারী যদি তাদের টাচস্ক্রিন এবং মাউস উভয়ই ব্যবহার করে তবে সাইটটিকে উদ্দেশ্য হিসাবে কাজ করতে দেয়।

আমরা জানি যে তারা যে আদেশের মধ্যে ঘোষণা করা হচ্ছে তার কারণেই mouseoverএটি ট্রিগার করা touchstartহচ্ছে init।

var mobileNoHoverState = function() {

    var hoverClass = 'hover',
        $target = $(".foo"), 
        preventMouseover = false;

    function forTouchstart() {
        preventMouseover = true;
    }

    function forMouseover() {
        if (preventMouseover === false) {
            $(this).addClass(hoverClass);
        } else {
            preventMouseover = false;
        }
    }

    function forMouseout() {
        $(this).removeClass(hoverClass);
    }

    function init() {
        $target.on({
            touchstart  : forTouchstart,
            mouseover   : forMouseover,
            mouseout    : forMouseout
        });                
    }

    return {
        init: init
    };
}();

মডিউলটি পরে লাইনটি আরও নিচে ইনস্ট্যান্ট করা হয়:

mobileNoHoverState.init();

Comments

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

— রেডটোপিয়া

@ রেডটপিয়া মাথা উঁচু করার জন্য ধন্যবাদ! আমি উত্তরটি ছেড়ে দিয়েছি এমন বিট কোড দিয়ে উত্তর আপডেট করেছি।

— ওয়াল্টার রোমান

ফাংশন ঘোষণার পরে আপনার সেমিকোলনগুলির প্রয়োজন নেই

— nacholibre

@ নাচোলিবিরে যথাযথ অর্ধ-কোলনের ব্যবহার করা হয়েছে

— ওয়াল্টার রোমান

Answer 4

আমি সত্যিই এটির একটি শুদ্ধ cssসমাধান চেয়েছিলাম , যেহেতু আমার সমস্ত মতামতের চারপাশে একটি ভারী জাভাস্ক্রিপ্ট সমাধান ছিটিয়ে দেওয়া একটি অপ্রীতিকর বিকল্প বলে মনে হয়েছিল। অবশেষে @ মিডিয়া.ওয়ে ক্যোয়ারীটি পাওয়া গেল , যা "প্রাথমিক ইনপুট প্রক্রিয়া ব্যবহারকারীকে উপাদানগুলির উপর ঝাঁকুনির অনুমতি দেয় কিনা" তা সনাক্ত করতে পারে। এটি স্পর্শ ডিভাইসগুলি এড়িয়ে চলে যেখানে ইনপুট ডিভাইসের সরাসরি সামর্থ্যের চেয়ে "হোভারিং" আরও বেশি অনুকরণীয় ক্রিয়া হয়।

সুতরাং উদাহরণস্বরূপ, আমার যদি একটি লিঙ্ক থাকে:

<a href="/" class="link">Home</a>

তারপরে আমি সুরক্ষিতভাবে কেবল :hoverতখনই স্টাইল করতে পারি যখন ডিভাইস এটির সাহায্যে সহজেই সমর্থন করে css:

@media (hover: hover) {
  .link:hover { /* hover styles */ }
}

যদিও বেশিরভাগ আধুনিক ব্রাউজারগুলি ইন্টারঅ্যাকশন মিডিয়া বৈশিষ্ট্য অনুসন্ধানগুলিকে সমর্থন করে, কিছু জনপ্রিয় ব্রাউজার যেমন আই আই এবং ফায়ারফক্স নয়। আমার ক্ষেত্রে এটি সূক্ষ্মভাবে কাজ করে, যেহেতু আমি কেবল ডেস্কটপে ক্রোম এবং মোবাইলে ক্রোম এবং সাফারি সমর্থন করি।

Comments

আপনি যখন Chrome ডিফল্টগুলিতে ডিভাইসগুলি অনুকরণ করেন তখন কার্যকর সমাধান মনে হয়। তবে এটি এখনও ক্রোম অ্যান্ড্রয়েডের জন্য কাজ করে না :-(

— 21

আমি মনে করি এটি সবচেয়ে সুবিধাজনক এবং সঠিক সমাধান। আশা করি শিগগিরই এটি ডাব্লু 3 সি স্ট্যান্ডার্ডে যুক্ত হবে।

— জিপি গ্রস্ট

Answer 5

আমার সমাধান হ'ল এইচটিএমএল ট্যাগে হোভার-অ্যাক্টিভ সিএসএস ক্লাস যুক্ত করা এবং এটি সমস্ত সিএসএস নির্বাচকদের শুরুতে ব্যবহার করে: প্রথম টাচস্টার্ট ইভেন্টে এই ক্লাসটিকে হোভার করুন এবং সরিয়ে দিন।

http://codepen.io/Bnaya/pen/EoJlb

জাতীয়:

(function () {
    'use strict';

    if (!('addEventListener' in window)) {
        return;
    }

    var htmlElement = document.querySelector('html');

    function touchStart () {
        document.querySelector('html').classList.remove('hover-active');

        htmlElement.removeEventListener('touchstart', touchStart);
    }

    htmlElement.addEventListener('touchstart', touchStart);
}());

এইচটিএমএল:

<html class="hover-active">

সিএসএস:

.hover-active .mybutton:hover {
    box-shadow: 1px 1px 1px #000;
}

Comments

একটি স্পর্শ ইভেন্ট শোনার পরিবর্তে, আপনি পরীক্ষা করতে পারেন 'ontouchstart' in window। যেমনif ('ontouchstart' in window) document.querySelector('html').classList.remove('hover-active');

— যুবাল এ।

@YuvalA। আমি যে কারণে স্পর্শ ইভেন্টটির জন্য অপেক্ষা করছি সে জন্য এখানে পয়েন্টার এবং টাচ সমর্থন সহ ডিভাইস রয়েছে এবং ব্যবহারকারীর মধ্যে আমি পয়েন্টারটি ব্যবহার করছি যা আমি হোভারটি সরাতে চাই না। এটি সম্ভবত সম্ভব যে ব্যবহারকারীর স্পর্শ এবং তারপরে পয়েন্টার ব্যবহার হবে তবে এ সম্পর্কে আমার বেশি কিছু করার নেই

— বিনায়া

Answer 6

আমি একই সমস্যাটি সমাধান করার জন্য যা করেছি তা হ'ল অন-টাচমোভ সংজ্ঞায়িত হয়েছে কিনা তা দেখে একটি বৈশিষ্ট্য সনাক্তকরণ (আমি এই কোডের মতো কিছু ব্যবহার করি ) এবং যদি আমি সিএসএস ক্লাসটি "টাচমোড" শরীরে যুক্ত করি তবে আমি যুক্ত করি " desktopMode "।

তারপরে প্রতিবার কিছু স্টাইল ইফেক্ট কেবল একটি টাচ ডিভাইসে প্রযোজ্য, বা কেবল কোনও ডেস্কটপে সিএসএস নিয়ম যথাযথ শ্রেণীর সাথে চাপ দেওয়া হয়:

.desktopMode .someClass:hover{ color: red }
.touchMode .mainDiv { width: 100%; margin: 0; /*etc.*/ }

সম্পাদনা করুন : অবশ্যই এই কৌশলটি আপনার সিএসএসে কয়েকটি অতিরিক্ত অক্ষর যুক্ত করেছে, সুতরাং আপনি যদি সিএসএস আকার সম্পর্কে উদ্বিগ্ন হন তবে আপনি টাচমোড এবং ডেস্কটপমোড স্পেসিফোনগুলি অনুসন্ধান করতে এবং এগুলিকে বিভিন্ন ফাইলে রেখে দিতে পারেন, তাই আপনি প্রতিটি ডিভাইসের জন্য অনুকূল সিএসএস সরবরাহ করতে পারেন টাইপ করুন; অথবা আপনি শ্রেণিবদ্ধ হওয়ার আগে ক্লাসের নামগুলি আরও ছোট কিছুতে পরিবর্তন করতে পারেন।

Answer 7

ঠিক আছে, আমার কাছে jst তেমন সমস্যা ছিল তবে মিডিয়া ক্যোয়ারী এবং সাধারণ সিএসএস দিয়ে এটি ঠিক করতে সক্ষম হয়েছি। আমি নিশ্চিত যে আমি এখানে কিছু নিয়ম ভঙ্গ করছি তবে এটি আমার পক্ষে কাজ করছে।

আমাকে মূলত কাউকে তৈরি করা একটি বিশাল অ্যাপ্লিকেশন নিতে হয়েছিল এবং এটিকে প্রতিক্রিয়াশীল করতে হয়েছিল। তারা jQueryUI ব্যবহার করেছিল এবং আমাকে তাদের jQuery এর সাথে কোনওরকম হস্তক্ষেপ না করতে বলেছিল, তাই আমি কেবল সিএসএস ব্যবহারে সীমাবদ্ধ ছিল।

আমি যখন তাদের একটি বাটন টাচস্ক্রিন মোডে চাপলাম তখন বোতামটির কার্যকারিতা কার্যকর হওয়ার আগে এক সেকেন্ডের জন্য হোভার ইফেক্ট ওয়াল্ড ফায়ার। এখানে আমি এটি ঠিক করেছি।

@media only screen and (max-width:1024px) {

       #buttonOne{
            height: 44px;
        }


        #buttonOne:hover{
            display:none;
        }
}   

Answer 8

আমার প্রকল্পে আমরা এই সমস্যাটি https://www.npmjs.com/package/postcss-hover-prefix এবং https://modernizr.com/ ব্যবহার করে সমাধান করেছি First প্রথমে আমরা আউটপুট সিএসএস ফাইলগুলি পোস্ট-প্রক্রিয়া করি postcss-hover-prefix। এটি .no-touchসমস্ত CSS hoverবিধি যুক্ত করে।

const fs = require("fs");
const postcss = require("postcss");
const hoverPrfx = require("postcss-hover-prefix");

var css = fs.readFileSync(cssFileName, "utf8").toString();
postcss()
   .use(hoverPrfx("no-touch"))
   .process(css)
   .then((result) => {
      fs.writeFileSync(cssFileName, result);
   });

CSS

a.text-primary:hover {
  color: #62686d;
}

হয়ে

.no-touch a.text-primary:hover {
  color: #62686d;
}

রানটাইমের সময় Modernizrস্বয়ংক্রিয়ভাবে htmlএই জাতীয় ট্যাগটিতে CSS ক্লাস যুক্ত হয়

<html class="wpfe-full-height js flexbox flexboxlegacy canvas canvastext webgl 
  no-touch 
  geolocation postmessage websqldatabase indexeddb hashchange
  history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage
  borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients
  cssreflections csstransforms csstransforms3d csstransitions fontface
  generatedcontent video audio localstorage sessionstorage webworkers
  applicationcache svg inlinesvg smil svgclippaths websocketsbinary">

সিএসএস প্লাস মডার্নাইজারের এ জাতীয় পোস্ট-প্রসেসিং টাচ ডিভাইসের জন্য হোভার অক্ষম করে এবং অন্যদের জন্য সক্ষম করে। প্রকৃতপক্ষে এই পদ্ধতিটি বুটস্ট্র্যাপ 4 দ্বারা অনুপ্রাণিত হয়েছিল, কীভাবে তারা একই সমস্যাটি সমাধান করে: https://v4-alpha.getbootstrap.com/getting-st সূত্র / ব্রাউজার্স- ডিভাইস /# স্টিকি- হোভারফোকস- অন- মোবাইল

Answer 9

আপনি mouseLeaveযখনই টাচস্ক্রিনে কোনও উপাদান স্পর্শ করবেন তখনই আপনি ইভেন্টটি ট্রিগার করতে পারেন । এখানে সমস্ত <a>ট্যাগের জন্য একটি সমাধান :

function removeHover() {
    var anchors = document.getElementsByTagName('a');
    for(i=0; i<anchors.length; i++) {
        anchors[i].addEventListener('touchstart', function(e){
            $('a').mouseleave();
        }, false);
    }
}

Comments

জেএসহিন্ট বলেছেন "কোনও লুপের মধ্যে ফাংশনগুলি তৈরি করবেন না"।

— নেটওপ্রেটার উইব্বি

এটি একটি হ্যাক। এটি একটি পুনরায় ব্যবহারযোগ্য কোড নয় যা ভাল অনুশীলন হিসাবে বিবেচনা করা যেতে পারে। @ নেটওপ্রেটার উইবি

— খোলভ

ভাল কোডটি পোষ্ট করা সত্যিই সহায়ক নয় যা ভাল অনুশীলন হিসাবে বিবেচনা করা যায় না। এটি ছুরির ক্ষতটিতে ব্যান্ড-এইড রাখার মতো।

— নেটওপ্রেটর উইব্বি

Answer 10

আইভি'ই সমস্যার 2 টি সমাধান খুঁজে পেয়েছিল, যা এর দ্বারা বোঝানো হয়েছে যে আপনি মডার্নিজর বা অন্য কোনও কিছুর সংস্পর্শটি সনাক্ত করে এবং এইচটিএমএল উপাদানটিতে একটি টাচ ক্লাস স্থাপন করেছেন।

এটি ভাল তবে খুব ভাল সমর্থিত নয় :

html.touch *:hover {
    all:unset!important;
}

তবে এটির খুব ভাল সমর্থন রয়েছে :

html.touch *:hover {
    pointer-events: none !important;
}

আমার জন্য নির্দোষ কাজ করে, এটি সমস্ত হোভার ইফেক্টগুলিকে এমন করে তোলে যখন আপনি যখন একটি বোতামের স্পর্শ রাখেন এটি হালকা হবে তবে মাউস ইভেন্টগুলির জন্য প্রাথমিক হোভার ইফেক্ট হিসাবে বগিটি শেষ করবে না।

নো-টাচ ডিভাইসগুলি থেকে স্পর্শ সনাক্ত করা আমার কাছে মনে হয় মডার্নিজার সেরা কাজ করেছেন:

https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js

সম্পাদনা

আমি এই সমস্যার একটি আরও ভাল এবং সহজ সমাধান খুঁজে পেয়েছি

ক্লায়েন্ট টাচ ডিভাইস কিনা তা নির্ধারণ করবেন

Answer 11

এটি আপনার সিএসএসটি দেখতে সহায়তা করতে পারে কারণ এটি একটি অদ্ভুত সমস্যার মতো মনে হচ্ছে। তবে যাইহোক, যদি এটি হয়ে থাকে এবং অন্য সব কিছু ভাল হয় তবে আপনি হোভার এফেক্টটিকে জাভাস্ক্রিপ্টে স্থানান্তরিত করার চেষ্টা করতে পারেন (আপনি পাশাপাশি জেকারিও ব্যবহার করতে পারেন)। সহজভাবে, মাউসওভার বা আরও ভাল এখনও মাউসেন্টার ইভেন্টের সাথে আবদ্ধ হন এবং ইভেন্টটি আগুন জ্বলে উঠলে আপনার উপাদানটি আলোকিত করুন।

এখানে সর্বশেষ উদাহরণটি চেকআউট করুন: http://api.jquery.com/mouseover/ , ইভেন্টটি আগুন লাগলে আপনি লগ করার অনুরূপ কিছু ব্যবহার করতে পারেন এবং সেখান থেকে নিয়ে যেতে পারেন!

Comments

সিএসএস সম্পর্কে বিশেষ কিছু নয়; আমার সম্পাদনা দেখুন। এবং আমি ইতিমধ্যে চেষ্টা করেছি mouseenter; কোন পাশা. আলতো চাপলে "অদৃশ্য মাউস কার্সার" সরানো হয়, সুতরাং এটি ট্রিগার হয় mouseenterএবং mousemove(এবং mouseleaveআপনি অন্য কোথাও ট্যাপ করলে)।

— জো হোয়াইট

Answer 12

আপনি যদি জাভাস্ক্রিপ্ট ব্যবহার করতে খুশি হন তবে আপনি আপনার পৃষ্ঠায় মডার্নজার ব্যবহার করতে পারেন । পৃষ্ঠাটি লোড হয়ে গেলে, কোনও নন-টাচ স্ক্রিন ব্রাউজারে এইচটিএমএল ট্যাগে '.নো-টাচ' ক্লাস যুক্ত হবে তবে একটি টাচ স্ক্রিন ব্রাউজারের জন্য, এইচটিএমএল ট্যাগটিতে এইচটিএমএল ট্যাগে '.touch' ক্লাস যুক্ত হবে ।

তারপরে এটি কেবল আপনার মাউসেন্টার এবং মাউসলেভ শ্রোতাদের যুক্ত করার সিদ্ধান্ত নেওয়ার আগে এইচটিএমএল ট্যাগটিতে নো-টাচ ক্লাস রয়েছে কিনা তা যাচাইয়ের একটি বিষয়।

if($('html').hasClass('no-touch')){
    $('.box').on("mouseenter", function(event){
            $(this).css('background-color','#0000ff')
    });
    $('.box').on("mouseleave", function(event){
            $(this).css('background-color','')
    });
}

টাচস্ক্রিন ডিভাইসের জন্য ইভেন্টগুলির কোনও শ্রোতা থাকবে না তাই আপনি যখন ট্যাপ করবেন তখন কোনও হভার ইফেক্ট পাবেন না।

Comments

সিএসএস দিয়ে এটি করা যেতে পারে যখন জাভাস্ক্রিপ্ট (জ্যাকুয়ারি) এর কম্পিউটার বিদ্যুতের অপচয় নয়

— সাইমন ড্রাগসব্যাক

সহজ এখনও, আপনার সিএসএসে, আপনি .touchএবং এর জন্য পৃথক নিয়ম সংজ্ঞায়িত করতে পারেন .no-touch। মডার্নাইজারের সাথে সিএসএসে আপনার উত্তরটি পুনরায় লেখার html.no-touch .box:hover {background-color: "#0000ff"}জন্য এবং কোনও কিছুর জন্য সংজ্ঞা html.touch .box:hoverনা দেওয়ার জন্য কৌশলটি করা উচিত, যেহেতু ওপি কেবল মোবাইল :hoverএস এড়ানোর চেষ্টা করছে ।

— ওয়াল্টার রোমান

Answer 13

একটি প্রকল্পে আমি সম্প্রতি করেছি, আমি jQuery এর প্রতিনিধি ইভেন্ট বৈশিষ্ট্য দিয়ে এই সমস্যাটি সমাধান করেছি। এটি একটি jQuery নির্বাচক ব্যবহার করে নির্দিষ্ট উপাদানগুলির সন্ধান করে এবং যখন মাউস উপাদানটির উপরে থাকে তখন সেই উপাদানগুলিতে একটি CSS ক্লাস যুক্ত / সরিয়ে দেয়। এটি যতক্ষণ না আমি এটি পরীক্ষা করতে পেরেছি ঠিক তেমন কাজ করছে বলে মনে হচ্ছে, যার মধ্যে উইন্ডোজ 8 চলমান একটি টাচ-সক্ষম নোটবুকের আইই 10 অন্তর্ভুক্ত রয়েছে।

$(document).ready(
    function()
    {
        // insert your own selector here: maybe '.hoverable'?
        var selector = 'button, .hotspot';

        $('body')
            .on('mouseover', selector, function(){ $(this).addClass('mouseover');    })
            .on('mouseout',  selector, function(){ $(this).removeClass('mouseover'); })
            .on('click',     selector, function(){ $(this).removeClass('mouseover'); });
    }
);

সম্পাদনা করুন: অবশ্যই এই সমাধানটির জন্য ": হোভার" নির্বাচনকারীদের অপসারণ করার জন্য আপনার সিএসএস পরিবর্তন করতে হবে এবং কোন উপাদানগুলিতে আপনি "লাভযোগ্য" হতে চান তা আগে থেকেই চিন্তা করে contemp

আপনার পৃষ্ঠাতে খুব বেশি উপাদান (বেশ কয়েক হাজার মত) যদি একটু ধীর, যদিও পেতে পারেন, কারণ তিনটি ধরনের এই সমাধান ক্যাচ ঘটনা সব উপাদান পৃষ্ঠা থেকে, এবং তারপর যদি নির্বাচক ম্যাচ তার জিনিস আছে। আমি "হোভার" এর পরিবর্তে সিএসএস ক্লাসের নাম দিয়েছি "মাউসওভার", কারণ আমি চাইনি যে কোনও সিএসএস পাঠক ": হোভার" যেখানে লিখেছেন ".হোভার" পড়ুন।

Answer 14

এখানে আমার সমাধান: http://jsfiddle.net/agamemnus/g56aw709/-- নীচে কোড।

সবারই দরকার তাদের ": হোভার" কে ".হোভার" এ রূপান্তর করা ... এটাই! এটির এবং বাকীগুলির মধ্যে বড় পার্থক্য হ'ল এটি অ-একবচন উপাদান সিলেক্টারের উপরও কাজ করবে.my_class > *:hover { ।

handle_css_hover_effects ()

function handle_css_hover_effects (init) {
 var init = init || {}
 var handle_touch_events = init.handle_touch_events || true
 var handle_mouse_events = init.handle_mouse_events || true
 var hover_class         = init.hover_class         || "hover"
 var delay_preferences   = init.delay_preferences   || {touch: {add: 500, remove: 500}}
 function default_handler (curobj, input_type, op) {
  var hovered_element_selector = "*" + ((op == "add") ? ":" : ("." + hover_class))
  var hovered_elements = Array.prototype.slice.call(document.body.querySelectorAll(hovered_element_selector))
  var modified_list = []
  while (true) {
   if ((curobj == null) || (curobj == document.documentElement)) break
   if (hovered_elements.indexOf(curobj) != -1) modified_list.push (curobj)
   curobj = curobj.parentNode
  }
  function do_hover_change () {modified_list.forEach (function (curobj) {curobj.classList[op](hover_class)})}
  if ((!delay_preferences[input_type]) || (!delay_preferences[input_type][op])) {
   do_hover_change ()
  } else {
   setTimeout (do_hover_change, delay_preferences[input_type][op])
  }
 }

 if (handle_mouse_events) {
  document.body.addEventListener ('mouseover' , function (evt) {var curobj = evt.target; default_handler (curobj, "mouse", "add")})
  document.body.addEventListener ('mouseout'  , function (evt) {var curobj = evt.target; default_handler (curobj, "mouse", "remove")})
  document.body.addEventListener ('click'     , function (evt) {var curobj = evt.target; default_handler (curobj, "mouse", "remove")})
 }

 if (handle_touch_events) {
  document.body.addEventListener ('touchstart', function (evt) {var curobj = evt.target; default_handler (curobj, "touch", "add")})
  document.body.addEventListener ('touchend'  , function (evt) {var curobj = evt.target; default_handler (curobj, "touch", "remove")})
  document.body.addEventListener ('touchmove',  function (evt) {
   var curobj = evt.target
   var hovered_elements = Array.prototype.slice.call(document.body.querySelectorAll("*:hover"))
   var lastobj = null
   evt = evt.changedTouches[0]
   var elements_at_point = get_elements_at_point (evt.pageX, evt.pageY)
   // Get the last element that isn't at the current point but is still hovered over, and remove only its hover attribute.
   while (true) {
    if ((curobj == null) || (curobj == document.documentElement)) break
    if ((hovered_elements.indexOf(curobj) != -1) && (elements_at_point.indexOf(curobj) == -1)) lastobj = curobj
    curobj = curobj.parentNode
   }
   if (lastobj == null) return
   if ((!delay_preferences.touch) || (!delay_preferences.touch.remove)) {
    lastobj.classList.remove(hover_class)
   } else {
    setTimeout (function () {lastobj.classList.remove(hover_class)}, delay_preferences.touch.remove)
   }

   function get_elements_at_point (x, y) {
    var el_list = [], pe_list = []
    while (true) {
     var curobj = document.elementFromPoint(x, y)
     if ((curobj == null) || (curobj == document.documentElement)) break
     el_list.push (curobj); pe_list.push (curobj.style.pointerEvents)
     curobj.style.pointerEvents = "none"
    }
    el_list.forEach (function (current_element, i) {current_element.style.pointerEvents = pe_list[i]})
    return el_list
   }
  })
 }
}

Answer 15

আপনার পৃষ্ঠায় আধুনিকীকরণ অন্তর্ভুক্ত করুন এবং এর পরিবর্তে আপনার হোভারের রাজ্যগুলি সেট করুন:

html.no-touchevents .box:hover {
    background: blue;
}

Answer 16

ভবিষ্যতের হ্যালো ব্যক্তি, আপনি সম্ভবত pointerএবং / অথবা hoverমিডিয়া ক্যোয়ারীটি ব্যবহার করতে চান । handheldমিডিয়া কুয়েরি অবচিত করা হয়েছিল।

/* device is using a mouse or similar */
@media (pointer: fine) {
  a:hover {
    background: red;
  }
}

Answer 17

এই সহজ 2019 jquery সমাধান চেষ্টা করুন, যদিও এটি প্রায় কিছুটা সময় হয়ে গেছে;

1. মাথায় এই প্লাগইন যুক্ত করুন:

   src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"

2. এটিকে জেএসে যুক্ত করুন:

   $("*").on("touchend", function(e) { $(this).focus(); }); //applies to all elements

3. এর কিছু প্রস্তাবিত বৈচিত্রগুলি হ'ল:

   $(":input, :checkbox,").on("touchend", function(e) {(this).focus);}); //specify elements
   
   $("*").on("click, touchend", function(e) { $(this).focus(); });  //include click event`
   
   css: body { cursor: pointer; } //touch anywhere to end a focus`

মন্তব্য

• টুলটিপগুলিকে প্রভাবিত করতে এড়াতে বুটস্ট্র্যাপ.জেএস এর আগে প্লাগইন রাখুন applicable
• সাফারি বা ক্রোম ব্যবহার করে কেবল আইফোন এক্সআর আইওএস 12.1.12 এবং আইপ্যাড 3 আইওএস 9.3.5 এ পরীক্ষা করা হয়েছে।

তথ্যসূত্র:

https://code.jquery.com/ui/

https://api.jquery.com/category/selectors/jquery-selector-extensions/