আইফোন / আইপ্যাড ব্যবহারকারীদের জন্য সিউডোক্লাস হোভার করার জন্য কী এটিকে জোর করা যায়?

Question 1

আমার সাইটে আমার কিছু সিএসএস মেনু রয়েছে যা :hover(জেএস ছাড়াই) দিয়ে প্রসারিত হয়

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

আমি touchstartইভেন্টটিকে আবদ্ধ করে আইফোনগুলিতে জিনিসগুলি সুন্দরভাবে কাজ করতে সক্ষম হয়েছি ।

সমস্যাটি হ'ল কখনও কখনও মোবাইল সাফারি আমার ইভেন্টগুলির পরিবর্তে:hover সিএসএস থেকে নিয়মটি ট্রিগার করতে পছন্দ করে !touchstart

আমি জানি এই সমস্যাটি কারণ যখন আমি :hoverCSS এ সমস্ত নিয়ম ম্যানুয়ালি অক্ষম করি তখন মোবাইল সাফারি দুর্দান্ত কাজ করে (তবে নিয়মিত ব্রাউজারগুলি স্পষ্টত আর না করে)।

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

আইওএসের আচরণটি এখানে দেখুন এবং তুলনা করুন: http://jsfiddle.net/74s35/3/ দ্রষ্টব্য: কেবলমাত্র কিছু সিএসএস বৈশিষ্ট্য দুটি ক্লিকের আচরণকে ট্রিগার করে, যেমন প্রদর্শন: কিছুই নয়; তবে ব্যাকগ্রাউন্ড নয়: লাল; বা পাঠ্য-সজ্জা: আন্ডারলাইন;

Question 2

আমি দেখতে পেলাম যে আইফোন / আইপ্যাড সাফারিতে ": হোভার" অপ্রত্যাশিত। কখনও কখনও উপাদানটিতে আলতো চাপুন যে উপাদানটি ": হোভার" করুন, কখনও কখনও এটি অন্যান্য উপাদানগুলিতে চলে যায়।

আপাতত, আমার শরীরে কেবল একটি "নো-টাচ" ক্লাস রয়েছে।

<body class="yui3-skin-sam no-touch">
   ...
</body>

এবং ":" কোনও স্পর্শ "নীচে" হোভার "সহ সমস্ত সিএসএস বিধি আছে:

.no-touch my:hover{
   color: red;
}

পৃষ্ঠায় কোথাও, আমার শরীর থেকে নো-টাচ ক্লাস অপসারণ করার জন্য জাভাস্ক্রিপ্ট রয়েছে ।

if ('ontouchstart' in document) {
    Y.one('body').removeClass('no-touch');
}

এটি নিখুঁত দেখাচ্ছে না, তবে এটি যাইহোক কাজ করে।

Question 3

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

mouseenterএবং mouseleaveএগুলি অন্তর্ভুক্ত বলে মনে হচ্ছে যদিও এগুলি চার্টে নির্দিষ্ট করা হয়নি।

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

$(window).on('mousemove', function() {
    $('body').attr('rel', Math.random());
});

সম্পাদনা: স্পষ্টকরণের জন্য, jQuery এর hoverইভেন্টটিতে mouseenterএবং রয়েছে mouseleave। এগুলি উভয়ই প্রতিরোধ করবেclickবিষয়বস্তু পরিবর্তিত হলে ।

Question 4

ব্রাউজারটি বৈশিষ্ট্য সনাক্তকরণ লাইব্রেরি মডার্নাইজার টাচের ইভেন্টগুলির জন্য একটি চেক অন্তর্ভুক্ত রয়েছে।

এটির ডিফল্ট আচরণটি হ'ল প্রতিটি বৈশিষ্ট্য সনাক্ত করার জন্য আপনার এইচটিএমএল উপাদানটিতে ক্লাস প্রয়োগ করা। এরপরে আপনি আপনার নথির স্টাইল করতে এই ক্লাসগুলি ব্যবহার করতে পারেন।

যদি টাচ ইভেন্টগুলি সক্ষম না করা থাকে মডার্নিজার একটি শ্রেণি যুক্ত করতে পারে no-touch:

<html class="no-touch">

এবং তারপরে এই শ্রেণীর সাহায্যে আপনার হোভার শৈলীর স্কোপ করুন:

.no-touch a:hover { /* hover styles here */ }

আপনি একটি কাস্টম মডার্নজার বিল্ড ডাউনলোড করতে পারেনআপনার প্রয়োজন অনুসারে কয়েকটি বা যতগুলি বৈশিষ্ট্য সনাক্তকরণ অন্তর্ভুক্ত ।

প্রয়োগ করা যেতে পারে এমন কিছু শ্রেণির উদাহরণ এখানে:

<html class="js no-touch postmessage history multiplebgs
             boxshadow opacity cssanimations csscolumns cssgradients
             csstransforms csstransitions fontface localstorage sessionstorage
             svg inlinesvg no-blobbuilder blob bloburls download formdata">

Question 5

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

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

এটি সাফারিতে একটি বাগ, এই ভয়ানক আচরণের কোনও যৌক্তিকতা নেই absolutely আমি আইওএস ব্রাউজারগুলিকে নাশকতা দিতে অস্বীকার করেছি কারণ আইওএস সাফারিতে একটি বাগ রয়েছে যা সম্ভবত কয়েক বছর ধরে রয়েছে। আমি সত্যই আশা করি তারা আগামী সপ্তাহে আইওএস 8 এর জন্য এটি ঠিক করেছেন তবে এর মধ্যে ...

আমার সমাধান :

কিছু ইতিমধ্যে মডার্নিজার ব্যবহার করার পরামর্শ দিয়েছেন, ভাল মডার্নিজার আপনাকে নিজের পরীক্ষা তৈরি করতে দেয়। আমি এখানে মূলত যা করছি তা হ'ল 'বিমূর্ত করা' এমন একটি ব্রাউজারের ধারণা যা :hoverএকটি আধুনিকীকরণ পরীক্ষায় সমর্থন করে যা আমি আমার কোড if (iOS)জুড়ে হার্ডকোড ছাড়াই ব্যবহার করতে পারি ।

 Modernizr.addTest('workinghover', function ()
 {
      // Safari doesn't 'announce' to the world that it behaves badly with :hover
      // so we have to check the userAgent  
      return navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? false : true;
 });

তারপরে CSS কিছু হয়ে যায়

html.workinghover .rollover:hover 
{
    // rollover css
}

কেবলমাত্র আইওএস-এ এই পরীক্ষাটি ব্যর্থ হবে এবং রোলওভার অক্ষম করবে।

এই জাতীয় বিমূর্তির সর্বোত্তম অংশটি হ'ল যদি আমি এটি একটি নির্দিষ্ট অ্যান্ড্রয়েডে ব্রেক হয়ে যায় বা এটি iOS9 এ স্থির হয়ে থাকে তবে আমি কেবল পরীক্ষাকে সংশোধন করতে পারি।

Question 6

কোনও জেএস, সিএসএস ক্লাস এবং ভিউপোর্ট চেক ছাড়াই আরও ভাল সমাধান: আপনি ইন্টারেক্টেশন মিডিয়া বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন (মিডিয়া কোয়েরি স্তর 4)

এটার মত:

@media (hover) {
  // properties
  my:hover {
    color: red;
  }
}

আইওএস সাফারি এটি সমর্থন করে

সম্পর্কে আরও: https://www.jonathanfielding.com/an-intr Prod-to-interation-media-features/

Question 7

আপনার পৃষ্ঠায় ফাস্টক্লিকের লাইব্রেরি যুক্ত করার ফলে একটি মোবাইল ডিভাইসের সমস্ত ট্যাপগুলি ক্লিক ইভেন্টগুলিতে পরিণত হবে (যেখানে ব্যবহারকারী ক্লিক করুক না কেন), সুতরাং এটি মোবাইল ডিভাইসে হোভার ইস্যুটিও ঠিক করতে হবে। আমি আপনার ফিডলটিকে উদাহরণ হিসাবে সম্পাদনা করেছি: http://jsfiddle.net/FvACN/8/ ।

কেবলমাত্র আপনার পৃষ্ঠায় ফাস্টক্লিক.মিন.জেস লিব অন্তর্ভুক্ত করুন এবং এর মাধ্যমে সক্রিয় করুন:

FastClick.attach(document.body);

পার্শ্ব সুবিধা হিসাবে এটি মোবাইল ডিভাইসগুলির দ্বারা ভোগা বিরক্তিকর 300ms অন ক্লিকের বিলম্বও সরিয়ে ফেলবে।

ফাস্টক্লিক ব্যবহারের ক্ষেত্রে বেশ কয়েকটি ছোটখাটো পরিণতি রয়েছে যা আপনার সাইটের জন্য গুরুত্বপূর্ণ বা নাও পারে:

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

Question 8

মূলত তিনটি পরিস্থিতি রয়েছে:

ব্যবহারকারীর কাছে কেবল একটি মাউস / পয়েন্টার ডিভাইস রয়েছে এবং এটি সক্রিয় করতে পারে:hover
ব্যবহারকারীর কেবলমাত্র একটি টাচস্ক্রিন রয়েছে এবং এটি সক্রিয় করতে পারে না:hover উপাদানগুলি
ব্যবহারকারীর একটি টাচস্ক্রিন এবং একটি পয়েন্টার ডিভাইস উভয়ই রয়েছে

মূলত গৃহীত উত্তর মহান কাজ করে শুধুমাত্র প্রথম দুটি পরিস্থিতিতে, সম্ভব যেখানে একটি ব্যবহারকারী রয়েছে পারেন পয়েন্টার বা টাচস্ক্রীন। ৪ বছর আগে ওপি যখন প্রশ্ন জিজ্ঞাসা করেছিল তখন এটি সাধারণ ছিল। বেশ কয়েকটি ব্যবহারকারী উল্লেখ করেছেন যে উইন্ডোজ 8 এবং সারফেস ডিভাইসগুলি তৃতীয় দৃশ্যের আরও সম্ভাবনা তৈরি করছে।

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

এই মুহুর্তে, নিরাপদ সমাধানটি হ'ল :hoverকোনও উপায় আপনার ব্যবহারকারীকে আপনার ওয়েবসাইটের সাথে ইন্টারঅ্যাক্ট করতে পারে as হোভার ইফেক্টগুলি একটি লিঙ্ক বা বোতামটি কার্যকর হয় তা নির্দেশ করার একটি ভাল উপায় তবে কোনও ব্যবহারকারীর আপনার ওয়েবসাইটে কোনও ক্রিয়া সম্পাদনের জন্য কোনও উপাদানকে হোভার করা প্রয়োজন হবে না।

টাচস্ক্রিন মাথায় রেখে পুনরায় চিন্তা "হোভার" কার্যকারিতা বিকল্প ইউএক্স পদ্ধতির সম্পর্কে ভাল আলোচনা করেছে। সেখানে উত্তর দ্বারা প্রদত্ত সমাধানগুলির মধ্যে রয়েছে:

সরাসরি ক্রিয়া (সর্বদা দৃশ্যমান লিঙ্কগুলি) সহ হোভার মেনুগুলি প্রতিস্থাপন করা হচ্ছে
অন-ট্যাপ মেনুগুলির সাথে অন-হোভার মেনুগুলি প্রতিস্থাপন
বিশাল পরিমাণে অন-হোভার সামগ্রী পৃথক পৃষ্ঠায় সরানো

এগিয়ে যাওয়া, এটি সম্ভবত সমস্ত নতুন প্রকল্পের জন্য সেরা সমাধান হবে। গৃহীত উত্তর সম্ভবত দ্বিতীয় সেরা সমাধান, তবে পয়েন্টার ডিভাইসগুলির মধ্যে এমন ডিভাইসগুলির জন্য অ্যাকাউন্ট করতে ভুলবেন না। আইওএসের :hoverহ্যাকের চারপাশে কাজ করার জন্য যখন কোনও ডিভাইসে একটি টাচস্ক্রিন থাকে তখন কার্যকারিতাটি সরিয়ে না দেওয়ার বিষয়ে সতর্ক হন ।

Question 9

আপনার .css- এর JQuery সংস্করণ। কোনও স্পর্শ। মাই-এলিমেন্ট ব্যবহার করুন: আপনার সমস্ত হোভার বিধিগুলির জন্য হোভারটিতে জিকুয়ারি এবং নিম্নলিখিত স্ক্রিপ্ট অন্তর্ভুক্ত রয়েছে

function removeHoverState(){
    $("body").removeClass("no-touch");
}

তারপরে বডি ট্যাগে ক্লাস = "নো-টাচ" অন্টচস্টার্ট = "সরানহোভারস্টেট ()" যুক্ত করুন

অন্টচস্টার্টে আগুনের সাথে সাথে সমস্ত হোভার রাজ্যের ক্লাস সরিয়ে ফেলা হবে

Question 10

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

touchTester = 
{
    touchStarted: false
   ,moveLimit:    5
   ,moveCount:    null
   ,isSupported:  'ontouchend' in document

   ,isTap: function(event)
   {
      if (!this.isSupported) {
         return true;
      }

      switch (event.originalEvent.type) {
         case 'touchstart':
            this.touchStarted = true;
            this.moveCount    = 0;
            return false;
         case 'touchmove':
            this.moveCount++;
            this.touchStarted = (this.moveCount <= this.moveLimit);
            return false;
         case 'touchend':
            var isTap         = this.touchStarted;
            this.touchStarted = false;
            return isTap;
         default:
            return true;
      }
   }
};

তারপরে, আমার ইভেন্ট হ্যান্ডেলারটিতে আমি নীচের মতো কিছু করি:

$('#nav').on('click touchstart touchmove touchend', 'ul > li > a'
            ,function handleClick(event) {
               if (!touchTester.isTap(event)) {
                  return true;
               }

               // touch was click or touch equivalent
               // nromal handling goes here.
            });

Question 11

উত্তরের জন্য @ মরগান চেংকে ধন্যবাদ, তবে আমি " টাচস্টার্ট " পাওয়ার জন্য জেএস ফাংশনটি সামান্য পরিবর্তন করেছি ( @ টিমোথি পেরেজ উত্তর থেকে নেওয়া কোড ) যদিও এর জন্য আপনার জিক্যুরি ১.7+ প্রয়োজন

  $(document).on({ 'touchstart' : function(){
      //do whatever you want here
    } });

Question 12

জেনেক্সার প্রদত্ত প্রতিক্রিয়া প্রদত্ত, এমন একটি প্যাটার্ন যাতে অতিরিক্ত কোনও HTML ট্যাগের প্রয়োজন হয় না:

jQuery('a').on('mouseover', function(event) {
    event.preventDefault();
    // Show and hide your drop down nav or other elem
});
jQuery('a').on('click', function(event) {
    if (jQuery(event.target).children('.dropdown').is(':visible') {
        // Hide your dropdown nav here to unstick
    }
});

এই পদ্ধতিটি প্রথমে মাউসওভারটি বন্ধ করে দেয়, দ্বিতীয়টি ক্লিক করুন।

Question 13

আমি সম্মত হচ্ছি স্পর্শের জন্য হোভার অক্ষম করার উপায়।

তবে নিজের সিএসএস পুনরায় লেখার ঝামেলা বাঁচানোর জন্য, কেবল কোনও :hoverআইটেম এতে জড়ান@supports not (-webkit-overflow-scrolling: touch) {}

.hover, .hover-iOS {
  display:inline-block;
  font-family:arial;
  background:red;
  color:white;
  padding:5px;
}
.hover:hover {
  cursor:pointer;
  background:green;
}

.hover-iOS {
  background:grey;
}

@supports not (-webkit-overflow-scrolling: touch) {
  .hover-iOS:hover {
    cursor:pointer;
    background:blue;
  }

}

<input type="text" class="hover" placeholder="Hover over me" />

<input type="text" class="hover-iOS" placeholder="Hover over me (iOS)" />

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

Question 14

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

@media only screen and (min-width: 1024px) {
  .my-div:hover { // will only work on devices larger than iOS touch-enabled devices. Will still work on touch-enabled PCs etc.
    background-color: red;
  }
}

Question 15

শুধু পর্দার আকার দেখুন ....

@media (min-width: 550px) {
    .menu ul li:hover > ul {
    display: block;
}
}

Question 16

কোডটি এখানে রেখে দিতে চান

// a function to parse the user agent string; useful for 
// detecting lots of browsers, not just the iPad.
function checkUserAgent(vs) {
    var pattern = new RegExp(vs, 'i');
    return !!pattern.test(navigator.userAgent);
}
if ( checkUserAgent('iPad') ) {
    // iPad specific stuff here
}