উপাদান থেকে সিএসএস আচরণ ': হোভার' সরান

Question

আমার কাছে সিএসএস রয়েছে যা আপনি যখন কোনও উপাদানকে ঘুরে দেখেন তখন ফর্ম্যাটিং পরিবর্তন করে changes

এইচটিএমএল:

<div class="test"> blah </div>

সিএসএস:

.test:hover {  border: 1px solid red; }

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

সুতরাং এটি আমাকে প্রশ্নে পরিচালিত করেছিল: কোনও উপাদান থেকে 'হোভার' সিএসএস স্টাইলিং সরানোর কোনও উপায় আছে কি?

Answer 1

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

উদাহরণ:

.test {  border: 0px; }
.testhover:hover {  border: 1px solid red; }

<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test testhover"> blah </div>

Answer 2

এটি করার একটি পদ্ধতি হ'ল:

pointer-events:none;

আপনি যে উপাদানটি চালিত করতে অক্ষম করতে চান সেই উপাদানটিতে।

(দ্রষ্টব্য: এটি সেই উপাদানটিতে জাভাস্ক্রিপ্ট ইভেন্টগুলিকেও অক্ষম করে, ক্লিক ইভেন্টগুলি আসলে পিছনের উপাদানটির মধ্য দিয়ে যাবে)।

ব্রাউজার সমর্থন (আগস্ট 22,2019 হিসাবে 97.04%)

এটি অনেকটা পরিষ্কার বলে মনে হচ্ছে

/**
* This allows you to disable hover events for any elements
*/
.disabled {
  pointer-events: none;  /**<-----------*/
  opacity: 0.2;
}

.button {
  border-radius: 30px;
  padding: 10px 15px;
  border: 2px solid #000;
  color: #FFF;
  background: #2D2D2D;
  text-shadow: 1px 1px 0px #000;
  cursor: pointer;
  display: inline-block;
  margin: 10px;
}

.button-red:hover {
  background: red;
}

.button-green:hover {
  background:green;  
}

<div class="button button-red">Im a red button hover over me</div>

<br/>

<div class="button button-green">Im a green button hover over me</div>

<br/>

<div class="button button-red disabled">Im a disabled red button</div>

<br/>

<div class="button button-green disabled">Im a disabled green button</div>

Comments

উত্তম উত্তর, এটি কেবলমাত্র << 11 এ অসমর্থিত, যাতে আর কোনও সমস্যা হয় না।

— অলিভিয়ার - ইন্টারফেসিস

এই উত্তরটি খুব পরিষ্কার এবং ঠিক আমি যা খুঁজছিলাম is আমি এটি আগে ব্যবহার করেছি তবে এটি এখনও আমার কাছে নতুন, তাই আমি প্রায়শই এটি ভুলে যাই।

— নিকোরেলিয়াস

ঠিক কী আমার নিখুঁত প্রয়োজন: ডি

— আলিজোহ

পয়েন্টার ইভেন্টগুলির জন্য আপভোট করুন। এটিই আমি অনুসন্ধান করেছি।

— গারাভানি

@ বোডম্যান পয়েন্টার-ইভেন্টস: কিছুই নয়; অন-হোভার পটভূমি পরিবর্তন সরানো হয়েছে তবে আমার উপাদান থেকে হাইপারলিংক অক্ষম করেছে। কীভাবে হোভার ইফেক্ট মুছে ফেলা যায় তবে হাইপারলিংক ধরে রাখবেন?

— বায়োডিপোপার

Answer 3

:notহোভার প্রয়োগ করতে চান না এমন ক্লাসগুলি বাদ দেওয়ার জন্য সিউডো-ক্লাসটি ব্যবহার করুন :

বেহালা

<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test nohover"> blah </div>

.test:not(.nohover):hover {  
    border: 1px solid red; 
}

এটি একটি সিএসএস নিয়মে আপনি যা চান!

Comments

অবশ্যই সেরা নির্জনতা! কম ব্রাউজারে কম কোড এবং ভাল কাজ করে।

— বেন বেসুইজন

এটি আমার পক্ষে কাজ করেছে তবে আমাকে একটি পরিবর্তন করতে হয়েছিল, এর আগে একটি স্থান :hover। এটি হতে পারে কারণ আমি SASS ব্যবহার করছি, নিশ্চিত নয়।

— nurdyguy

ধন্যবাদ, আমি touchDeviceক্লাসে ক্লাস যুক্ত করে bodyএবং আমার সিএসএসের নিয়মগুলির মতো কিছুতে পরিবর্তন করে আমার অ্যাপ্লিকেশনটিতে টাচ ডিভাইসের জন্য কাস্টম বোতামগুলির কোনও হভার প্রভাবগুলি অক্ষম করতে এটি ব্যবহার করেছিbody:not(.touchDevice) .button:hover { ... }

— আলেকজান্ডার

হ্যাঁ, এই সমাধানটি আরও ভাল।

— Tsurule খণ্ড

Answer 4

একটি নতুন .css ক্লাস যুক্ত করুন:

#test.nohover:hover { border: 0 }

এবং

<div id="test" class="nohover">blah</div>

আরও "নির্দিষ্ট" সিএসএস নিয়ম জিতবে, সুতরাং এই সীমানা: 0 সংস্করণটি অন্য কোথাও নির্দিষ্ট জেনেরিকে ওভাররাইড করবে।

Comments

এটা হবে। এবং এটি ডিফল্ট বর্ণনটিকে ওভাররাইড করবে যা ভিন্ন is সুতরাং সর্বদা একটি ব্রাউজার থাকবে যার মধ্যে হোভারটি দৃশ্যমান হবে।

— মার্টিনাস

Answer 5

আমারও এই সমস্যা ছিল, আমার সমাধানটি হল যে উপাদানটির উপরে আমি কোনও প্রভাব ফেলতে চাই না তার উপরে একটি উপাদান থাকা উচিত:

.no-hover {
  position: relative;
  opacity: 0.65 !important;
  display: inline-block;
}

.no-hover::before {
  content: '';
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<button class="btn btn-primary">hover</button>
<span class="no-hover">
  <button class="btn btn-primary ">no hover</button>
</span>

Comments

আকর্ষণীয় সমাধান।

— বোডম্যান

Answer 6

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

$(".test").hover(
  if(some evaluation) {
    $(this).css('border':0);
  }
);