সিএসএসে `পয়েন্টার-ইভেন্টগুলি: হোভারঅনলি` বা অনুরূপ কি আছে?

Question 1

সিএসএসে pointer-eventsসবেমাত্র সম্পত্তি নিয়ে খেলছি ।

আমার কাছে এমন একটি রয়েছে divযা আমি বাদে সমস্ত মাউস ইভেন্টে অদৃশ্য হতে চাই :hover।

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

কেউ কি আমাকে বলতে পারবেন এটি করা যায় কিনা?

এইচটিএমএল:

<div class="layer" style="z-index:20; pointer-events:none;">Top layer</div>
<div class="layer" style="z-index:10;">Bottom layer</div>

সিএসএস:

.layer {
    position:absolute;
    top:0px;
    left:0px;
    height:400px;
    width:400px;
}

Question 2

আমি মনে করি না যে কেবলমাত্র সিএসএসে আপনার লক্ষ্য অর্জন সম্ভব। যাইহোক, অন্যান্য অবদানকারীরা যেমন উল্লেখ করেছেন, JQuery এ করা যথেষ্ট সহজ। আমি এটি কীভাবে করেছি তা এখানে:

এইচটিএমএল

<div
  id="toplayer"
  class="layer"
  style="
    z-index: 20;
    pointer-events: none;
    background-color: white;
    display: none;
  "
>
  Top layer
</div>
<div id="bottomlayer" class="layer" style="z-index: 10">Bottom layer</div>

সিএসএস (অপরিবর্তিত)

.layer {
    position:absolute;
    top:0px;
    left:0px;
    height:400px;
    width:400px;
}

জিকুয়েরি

$(document).ready(function(){
    $("#bottomlayer").hover(
        function() {
            $("#toplayer").css("display", "block");
        },
        function() {
            $("#toplayer").css("display", "none");
        }
    );
});

এখানে জেএসফিডাল: http://www.jsfiddle.net/ReZ9M

Question 3

শুধু ঘোরা। এটা খুব সহজ. জেএস নেই ... লিঙ্কের ডিফল্ট ক্রিয়াটিও আটকাবেন।

a:hover {
	color: red;
}
a:active {
	pointer-events: none;
}

<a href="www.google.com">Link here</a>

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

সম্পাদনা করুন: আইই 11 এবং তারপরে http://caniuse.com/#search=pointer-events এ সমর্থিত

Question 4

"চুরি করা" জাঙ্কোর উত্তর কিন্তু সেই কুৎসিত, কুরুচিপূর্ণ jQuery ছাড়াই।

স্নিপেট : বিজ্ঞপ্তি ডিআইভিগুলি বিপরীত ক্রমে রয়েছে

.layer {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 400px;
  width: 400px;
}

#bottomlayer {
  z-index: 10
}

#toplayer {
  z-index: 20;
  pointer-events: none;
  background-color: white;
  display: none
}

#bottomlayer:hover~#toplayer {
  display: block
}

<div id="bottomlayer" class="layer">Bottom layer</div>
<div id="toplayer" class="layer">Top layer</div>

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

Question 5

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

যদিও এটি আপনার ক্ষেত্রে নির্ভর করে।

প্যারেন্ট এলিমেন্ট হোভারে। আমি এটা করেছি:

.child {
    pointer-events: none;
    background-color: white;
}

.parent:hover > .child {
    background-color: black;
}

Question 6

আমি ব্যবহার :hoverএকটি সমান আকারের পিতা বা মাতা / পাত্রের সিউডো-উপাদান আমার আস্তরণ DIV উপর হোভার ভান, তারপর আস্তরণ এর সেট pointer-eventsথেকে noneনীচের উপাদান ক্লিকের মাধ্যমে পাস।

কোড স্নিপেট দেখান

let button = document.getElementById('woohoo-button');
button.onclick = () => console.log('woohoo!');

let overlay = document.getElementById('overlay');
overlay.onclick = () => console.log(`Better change my pointer-events property back to 'none'`);

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: green;
  width: 300px;
  height: 300px;
}

#overlay {
  background-color: black;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  /* Pass through clicks */
  pointer-events: none;
}


/* 
   Set overlay hover style based on
   :hover pseudo-element of its  
   container
*/
#container:hover #overlay {
  opacity: 0.5;
}

#woohoo-button {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
}

<div id="container">
  <div id="overlay"></div>
  <button id="woohoo-button">
    Click Me
  </button>
</div>

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

Question 7

আপনার অনুরোধের খাঁটি সিএসএস সমাধান (অস্বচ্ছতার সম্পত্তিটি কেবলমাত্র স্থানান্তরের প্রয়োজনীয়তার জন্য চিত্রিত করার জন্য রয়েছে):

.hoverOnly:hover {
    pointer-events: none;
    opacity: 0.1;
    transition-delay: 0s;
}
.hoverOnly {
    transition: ,5s all;
    opacity: 0.75;
    transition-delay: 2s;
}

এর মানে কি:

মাউস বাক্সে প্রবেশ করার পরে, এটি :hoverরাষ্ট্রকে ট্রিগার করে । তবে সেই অবস্থায়, পয়েন্টার-ইভেন্টগুলি অক্ষম করা হয় are

তবে আপনি যদি ট্রানজিশন টাইমার সেট না করেন তবে মাউস সরে গেলে Div হোভারের অবস্থা বাতিল করে দেবে; মাউস এলিমেন্টের ভিতরে চলাকালীন হোভারের অবস্থা ঝাঁকুনিযুক্ত হবে। অস্বচ্ছ বৈশিষ্ট্যগুলির সাথে উপরের কোডটি ব্যবহার করে আপনি এটি বুঝতে পারবেন।

হোভারের স্থিতি থেকে উত্তরণের জন্য বিলম্ব নির্ধারণ করা এটি ঠিক করে। 2sমান আপনার প্রয়োজন অনুসারে tweaked করা যেতে পারে।

ট্রানজিশনগুলিতে ক্রেডিটগুলি টুইট : এই উত্তরটির উপর প্যাটড ।

Question 8

শুধু খাঁটি সিএসএস , জ্যাকুরির দরকার নেই :

div:hover {pointer-events: none}
div {pointer-events: auto}