অক্ষম না থাকাকালীন কেবল হোভার এবং অ্যাক্টিভ থাকুন

Question

আমি স্টাইল বাটনগুলিতে হোভার , সক্রিয় এবং অক্ষম ব্যবহার করি ।

তবে সমস্যাটি হ'ল বাটনটি নিষ্ক্রিয় করা থাকলে এবং সক্রিয় শৈলীগুলি এখনও প্রয়োগ হয়।

কীভাবে কেবল সক্ষম বোতামে হোভার এবং সক্রিয় প্রয়োগ করবেন?

Answer 1

আপনি ব্যবহার করতে পারেন : সক্ষম ছদ্ম-শ্রেণি, কিন্তু বিজ্ঞপ্তি IE<9এটি সমর্থন করে না :

button:hover:enabled{
    /*your styles*/
}
button:active:enabled{
    /*your styles*/
}

Comments

:not()নির্বাচক এছাড়াও আছে , কিন্তু আবার, এটি শুধুমাত্র IE9 থেকে সমর্থিত। দেখুন: ডেভেলপার.মোজিলা.আর.ইন-

— ইউএস

button:hover:enabledআমার ক্ষেত্রে কাজ করবে বলে মনে হয়নি। আইই 11 এর অধীনে আই 99 অনুকরণ ব্যবহার করা।

— নিওলিস্ক

Answer 2

.button:active:hover:not([disabled]) {
    /*your styles*/
}

আপনি এটি চেষ্টা করতে পারেন ..

Comments

আপনি যখন "হোভার অক্ষম" অবস্থাটিকে "অ -হোল্ড করা অক্ষম" অবস্থার অনুরূপ দেখতে চান তবে এটির জন্য এটি একটি ভাল সমাধান।

— মিকেল লু

আমি <3 এই সমাধান। আমাকে নিম্নলিখিতগুলি পেতে অনুমতি দেয়: <বোতাম শ্রেণি = "বাটন"> হোভারস </ বাটন> এবং <বোতাম শ্রেণি = "বোতাম নো-হোভার> হোভার হয় না </ বাটন> কেবলমাত্র ব্যবহার করে: নয় (না-হোভার)

— বেন

Answer 3

CSS এ অ্যাট্রিবিউট "অক্ষম" ব্যবহার করছেন না কেন। এটি অবশ্যই সমস্ত ব্রাউজারে কাজ করে।

button[disabled]:hover {
    background: red;
}
button:hover {
    background: lime;
}

Comments

সমস্ত প্রতিবন্ধী রাজ্যগুলিকে এক লাইনে নির্বাচন করে কভার করুন:.button[disabled], .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active {}

— DBK

Answer 4

একটি নিম্ন-নির্দিষ্টতা পদ্ধতির যা বেশিরভাগ আধুনিক ব্রাউজারগুলিতে কাজ করে (আইই 11 + এবং কিছু মোবাইল অপেরা এবং আইই ব্রাউজারগুলি বাদ দিয়ে - http://caniuse.com/#feat=pointer-events ):

.btn {
  /* base styles */
}

.btn[disabled]
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.btn:hover {
  color: red;
}

pointer-events: noneনিয়ম হোভার নিষ্ক্রিয় করা হবে; .btn[disabled]:hoverহোভার স্টাইলটি বাতিল করতে আপনাকে কোনও নির্বাচকের সাথে নির্দিষ্টতা বাড়াতে হবে না ।

(এফওয়াইআই, এটি সাধারণ HTML পয়েন্টার-ইভেন্টস, বিতর্কিত বিমূর্ত-ইনপুট-ডিভাইসগুলির পয়েন্টার-ইভেন্টগুলি নয়)

Answer 5

সাস ইন (এসএসএস):

 button {
  color: white;
  cursor: pointer;
  border-radius: 4px;

  &:disabled{
    opacity: 0.4;

    &:hover{
      opacity: 0.4;  //this is what you want
    }
  }

  &:hover{
    opacity: 0.9;
  }
}

Answer 6

আপনি যদি ব্যবহার করেন LESSবা Sass, আপনি এটি ব্যবহার করতে পারেন:

.btn {
  &[disabled] {
    opacity: 0.6;
  }
  &:hover, &:active {
    &:not([disabled]) {
      background-color: darken($orange, 15);
    }
  }
}

Comments

এটি SASS তে একটি ভাল সমাধান যেহেতু হোভার এফেক্টটি অক্ষম বোতামটির জন্য প্রক্রিয়া করা হবে আপনি যদি না এটি অবরুদ্ধ করে রাখেন।

— এমবোকিল

Answer 7

একটি উপায় হ'ল একটি ক্লাসিকুলার ক্লাস যুক্ত করা যখন বোতামগুলি অক্ষম করার সময় এবং CSS এর ক্ষেত্রে এই শ্রেণীর জন্য হোভার এবং সক্রিয় রাজ্যগুলিকে ওভাররাইড করা। বা কেবল শ্রেণীবদ্ধের উপর কেবল সেই শ্রেণিতে হোভার এবং সক্রিয় সিউডো বৈশিষ্ট্যগুলি অক্ষম করা এবং নির্দিষ্ট করার সময় কোনও শ্রেণি অপসারণ। যেভাবেই হোক, এটি সম্ভবত সিএসএস দিয়ে খাঁটিভাবে করা যায় না, আপনাকে কিছুটা জেএস ব্যবহার করতে হবে।