সিওএসএস সিউডো-ক্লাসের বিপরীতে কি আছে: হোভার?

Question 1

সিএসএসে একটি সিউডো-ক্লাস নির্দিষ্ট করার আছে কি?

:not(:hover)

বা overedালানো হচ্ছে না এমন কোনও আইটেম নির্দিষ্ট করার একমাত্র উপায়?

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

Question 2

হ্যাঁ, ব্যবহার করুন :not(:hover)

.child:not(:hover){
  opacity: 0.3;
}

jsBin ডেমো

আরেকটি উদাহরণ; আমি মনে করি আপনি এটি করতে চান: "যখন একজনকে আটকানো হয়, তখন সমস্ত অন্যান্য উপাদানগুলিকে ম্লান করুন" ।

যদি আমার ধারণাটি সঠিক হয় এবং ধরে নিচ্ছেন যে আপনার সমস্ত নির্বাচক একই পিতা বা মাতার মধ্যে আছেন:

.parent:hover .child{
    opacity: 0.2;      // Dim all other elements
}
.child:hover{
   opacity: 1;         // Not the hovered one
}

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

.child{
  display:inline-block;
  background:#000;
  border:1px solid #fff;
  width: 50px;
  height: 50px;
  transition: 0.4s;
}

.parent:hover .child{
  opacity: 0.3;
}
.parent .child:hover{
  opacity: 1;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

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

অন্যথায় ... কেবলমাত্র ডিফল্ট যুক্তি ব্যবহার করুন:

.child{
   opacity: 0.2;
}
.child:hover{
   opacity: 1;
}

Question 3

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

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

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

আপনি নির্দিষ্টতা সম্পর্কে চিন্তিত হয়, দয়া করে মনে রাখবেন সিউডো-বর্গ নিজেই নির্দিষ্টতা জন্য গণনা করা নয়; শুধুমাত্র এটির সুনির্দিষ্ট যুক্তি । এবং সমানভাবে নির্দিষ্ট। সুতরাং নির্দিষ্টতা কোন সমস্যা হয় না।:not():not(:hover):hover

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

মনে রাখবেন যে এটি নীচের প্রশ্নের মতো নয়, যা ইভেন্ট বনাম রাজ্যগুলির বিষয়ে আলোচনা করে (এটি মূলত :focusতুলনায় মূলত :hover, তবে একই নীতিটি প্রযোজ্য): সিএসএসের কি আছে: অস্পষ্ট নির্বাচক (ছদ্ম-শ্রেণি)?

Question 4

আপনি যদি অন্য কোনও কিছুর উপর কেবল ঘোরাফেরা করার জন্য কিছু প্রদর্শন করতে চান তবে আপনি এটি ব্যবহার করতে পারেন

selector:not(:hover)

এটার মত:

section{
   font-size:3em;
}

div:not(:hover) + section{
 display:none;
}

<div>Hover on me</div>

<section>Peek A Boo!</section>

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

আপনার মনে রাখা উচিত এমনটি ব্যবহার করার সময় বেশ কয়েকটি অস্বাভাবিক প্রভাব এবং ফলাফল রয়েছে :not():

:not(:not(...)), :not(p::before)সম্ভব নয়
:not(*) অবশ্যই প্রয়োগ করা হবে না
:not(.foo)কিছু নয় ম্যাচ হবে .foo, যেমন ট্যাগ সহ <HTML>এবং<body>
যেমন একটি নিয়মের স্বাতন্ত্র্যতা বাড়ে, প্রাক্তন: #foo:not(#bar)সরল হিসাবে একই উপাদানের সাথে মেলে #fooতবে তার উচ্চতর বৈশিষ্ট্য রয়েছে।

andসাথে অপারেশন :not:

উপাদানগুলি না <div>এবং <span>উপাদান নয় : body :not(div):not(span){}

orঅপারেশন :not, এটি এখনও ভাল সমর্থিত নয়।

যে উপাদানগুলি নয় .crazyবা .fancy:body :not(.crazy, .fancy){}

উত্স MDN

Question 5

a {
  /*styles*/
}

একটি সাধারণ (আড়াল করা লিঙ্ক)

a:hover {
  /*styles*/
}

একটি রক্ষিত লিঙ্ক