পরিবর্তন হচ্ছে: মোবাইল ডিভাইসগুলির জন্য স্পর্শ / ক্লিক করতে হোভার করুন

Question 1

আমি চারপাশে একবার দেখেছি কিন্তু আমি যা খুঁজছি তা বেশ খুঁজে পাচ্ছি না।

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

এই মুহূর্তে আমার যা আছে তা এখানে: http://jsfiddle.net/danieljoseph/3p6Kz/

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

আমি যদি সম্ভব হয় তবে সিএসএস ব্যবহার করি তবে জিকুয়েরিতেও খুশি।

আমার মনে হচ্ছে এটি করা খুব সহজ তবে আমি খুব স্পষ্ট কিছু মিস করছি! কোন সাহায্য প্রশংসা করা হবে।

এখানে সিএসএস অ্যানিমেশন রয়েছে:

.info-slide {
  position:absolute;
  bottom:0;
  float:left;
  width:100%;
  background:url(../images/blue-back.png);
  height:60px;
  cursor:pointer;
  overflow:hidden;
  text-align:center;
  transition: height .4s ease-in-out;
  -webkit-transition: height .4s ease-in-out;
  -moz-transition: height .4s ease-in-out;
}

.info-slide:hover {
  height:300px;
}

Question 2

আপনি যদি ব্যবহার করেন: সাথে সক্রিয় সক্রিয় নির্বাচক: হোভার আপনি ডাব্লু 3 স্কুল অনুসারে এটি অর্জন করতে পারবেন যতক্ষণ না: সক্রিয় নির্বাচককে বলা হয়: হোভার সিলেক্টারের পরে।

 .info-slide:hover, .info-slide:active{
   height:300px;
 }

আপনি একটি মোবাইল পরিবেশে FIDDLE পরীক্ষা করতে হবে । আমি এই মুহুর্তে পারি না।
সংশোধন - আমি কেবল একটি মোবাইলে পরীক্ষা করেছি, এটি দুর্দান্ত কাজ করে

Question 3

আপনি onclick=""আটকে থাকা উপাদান যোগ করতে পারেন । হোভার তার পরে কাজ করবে।

সম্পাদনা করুন: তবে আপনার মার্কআপ সম্পর্কিত কোনও স্টাইল যুক্ত করা উচিত নয়, কেবল এটি বিকল্প হিসাবে পোস্ট করেছেন।

Question 4

document.addEventListener("touchstart", function() {}, true);

এই স্নিপেট টাচস্ক্রিনের জন্য হোভার ইফেক্টগুলি সক্ষম করবে

Question 5

মাইক্রোসফ্টের এজ ব্রাউজারের সাথে মোবাইল ডিভাইসেও আমি একই সমস্যায় পড়েছি। আমি সমস্যা সমাধান করতে পারে: aria-haspopup="true"। এটা তোলে div ও যোগ করতে প্রয়োজন :hover, :active, :focusঅন্যান্য মোবাইল ব্রাউজারের জন্য।

এইচটিএমএল উদাহরণ:

<div class="left_bar" aria-haspopup="true">

সিএসএস:

.left_bar:hover, .left_bar:focus, .left_bar:active{
    left: 0%;
    }

Question 6

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

আপনার ডিভের পটভূমিটি ডিভের মধ্যে একটি প্রকৃত চিত্র ট্যাগে পরিবর্তন করুন বা পুরো ডিভের চারপাশে একটি ডামি লিঙ্ক তৈরি করুন, এটি যখন আপনি চিত্রটি স্পর্শ করবেন তখন এটি হোভার হিসাবে নিবন্ধিত হবে।

এটি করার অর্থ হ'ল আপনার বাকী পৃষ্ঠাটিও "আড়ালযোগ্য" হতে হবে তাই আপনি যখন চিত্রের বাইরে ছোঁবেন তখন এটি সেই তথ্য-স্লাইডটিকে চিনবে: হোভারটি শেষ হয়েছে। আমার কৌশলটি আমার সমস্ত অন্যান্য কন্টেন্টের ডামি লিঙ্কগুলি তৈরি করা।

এটি খুব মার্জিত নয় তবে এটি কাজ করে।

Question 7

বেশিরভাগ ডিভাইসে, অন্যান্য উত্তরগুলি কাজ করে। আমার জন্য, তা নিশ্চিত করার জন্য এটি কাজ যে ডিভাইস (মধ্যে প্রতিক্রিয়া) আমি একটি নোঙ্গর ট্যাগ এটা মোড়ানো ছিল <a>এবং নিচের যোগ করুন: :hover, :focus, :activeহিসাবে (যাতে), পাশাপাশি role="button"এবং tabIndex="0"।

Question 8

আমি মনে করি এই সহজ পদ্ধতিটি এই লক্ষ্য অর্জন করতে পারে। সিএসএসের সাহায্যে আপনি পয়েন্টার ইভেন্টটি 'কিছুই নয়' তে বন্ধ করতে পারেন তারপর ক্লাসে স্যুইচ করতে jQuery ব্যবহার করুন।

.item{
   pointer-events:none;
 }

.item.clicked{
   pointer-events:inherit;
 }
 
.item:hover,.item:active{
  /* Your Style On Hover Converted to Tap*/
  background:#000;
}

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

ক্লাসযুক্ত স্যুইচ করতে jQuery ব্যবহার করুন:

jQuery('.item').click(function(e){
  e.preventDefault();
  $(this).addClass('clicked')l
});

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

Question 9

মোবাইল টাচস্ক্রিন বোতাম স্টাইলিংয়ের ক্ষেত্রে যারা সমস্যায় পড়ছেন তাদের কেবল একটি সিএসএস সমাধান।

এটি আপনার হোভার-স্টিক / অ্যাক্টিভ বোতাম সমস্যার সমাধান করবে।

body, html {
  width: 600px;
}
p {
  font-size: 20px;
}

button {
  border: none;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: #00aeff;
  font-size: 20px;
}

button:active {
  background: black;
  color: white;
}

.delayed {
  transition: all 0.2s;
  transition-delay: 300ms;
}

.delayed:active {
  transition: none;
}

<h1>Sticky styles for better touch screen buttons!</h1>

<button>Normal button</button>

<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>

<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>

<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>

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

Question 10

ঠিক আছে আমি উপরের উত্তরগুলির সাথে একমত তবে এখনও এটি করার একটি অন্য উপায় হতে পারে এবং এটি mediaকোয়েরি ব্যবহার করে ।

ধরুন আপনি এটি করতে চান:

body.nontouch nav a:hover {
    background: yellow;
}

তাহলে আপনি মিডিয়া ক্যোয়ারির মাধ্যমে এটি করতে পারেন:

@media(hover: hover) and (pointer: fine) {
    nav a:hover {
        background: yellow;
    }
}

এবং আরও তথ্যের জন্য আপনি এই পৃষ্ঠাটি দেখতে পারেন ।