মধ্যে পার্থক্য কি :focusএবং :activeসিউডো-শ্রেণীর?
মধ্যে পার্থক্য কি :focusএবং :activeসিউডো-শ্রেণীর?
উত্তর:
:focusএবং :activeদুটি পৃথক রাষ্ট্র।
:focus যখন উপাদানটি বর্তমানে ইনপুট গ্রহণের জন্য নির্বাচিত হয় এবং তখন রাষ্ট্রটির প্রতিনিধিত্ব করে :active যখন উপাদানটি বর্তমানে ব্যবহারকারী দ্বারা সক্রিয় করা হচ্ছে তখন রাষ্ট্রটির প্রতিনিধিত্ব করে।উদাহরণস্বরূপ বলা যাক আমাদের একটি আছে <button>। এর সাথে আর <button>কোনও রাজ্য শুরু হবে না। এটি সবেমাত্র বিদ্যমান। যদি আমরা Tab"ফোকাস" দিতে ব্যবহার করি তবে <button>এটি এখন তার :focusরাজ্যে প্রবেশ করে । আপনি যদি ক্লিক করেন (বা টিপুন space), আপনি তারপরে বোতামটি তার ( :active) অবস্থায় প্রবেশ করুন ।
এই নোটটিতে, আপনি যখন কোনও উপাদানটিতে ক্লিক করেন, আপনি এটিকে ফোকাস দেন, যা মায়াও চাষ করে :focusএবং :activeএটি একই। তারা একই নয়। ক্লিক করা হলে বোতামটি :focus:activeঅবস্থায় থাকে।
একটি উদাহরণ:
<style type="text/css">
button { font-weight: normal; color: black; }
button:focus { color: red; }
button:active { font-weight: bold; }
</style>
<button>
When clicked, my text turns red AND bold!<br />
But not when focused only,<br />
where my text just turns red
</button>সম্পাদনা: jsfiddle
:activeরাষ্ট্রকেই আহবান করে
focusএবং activeঘোষণার ক্রম কোনও ব্যাপার নয়। এটি কেবল তখনই গুরুত্বপূর্ণ যখন তারা একে অপরের সাথে বিরোধিতা করে যেমন উদাহরণস্বরূপ color:redএবং color:blue(তারপরে একটি জিতেছে)।
:active Adds a style to an element that is activated
:focus Adds a style to an element that has keyboard input focus
:hover Adds a style to an element when you mouse over it
:lang Adds a style to an element with a specific lang attribute
:link Adds a style to an unvisited link
:visited Adds a style to a visited linkসূত্র: সিএসএস সিউডো-ক্লাস
visitedআড়াল বা ক্লিক করার সময় লিঙ্কগুলি স্টাইল পরিবর্তন করবে না কারণ তাদের "পরিদর্শন" অন্যান্য সিউডো-শ্রেণীর উপরের লিখিত হবে। LVHFA হ'ল আদেশ বেশিরভাগ ক্ষেত্রেই ব্যবহার করতে চায়। আপনি কেন অন্তর্ভুক্ত ছিলেন তা নিশ্চিত নন lang...
চারটি মামলা রয়েছে।
:focus:active:active:focusউদাহরণ:
<div>
I cannot be focused.
</div>
<div tabindex="0">
I am focusable.
</div>div:focus {
background: green;
}
div:active {
color: orange;
}
div:focus:active {
font-weight: bold;
}পৃষ্ঠাটি লোড হয়ে গেলে উভয় ক্ষেত্রেই ১ থাকে। আপনি যখন ট্যাব টিপবেন তখন আপনি দ্বিতীয় ডিভকে ফোকাস করবেন এবং এটি কেসটি প্রদর্শন করবেন 2 আপনি যখন প্রথম ডিভের উপর ক্লিক করেন তখন আপনি কেসটি দেখেন When যখন আপনি দ্বিতীয় ডিভিতে ক্লিক করেন, আপনি কেস 4 দেখতে পাবেন ।
কোনও উপাদান ফোকাসযোগ্য কিনা তা অন্য প্রশ্ন । বেশিরভাগ ডিফল্টরূপে হয় না। কিন্তু, এটা অনুমান করা নিরাপদ <a>, <input>, <textarea>ডিফল্টরূপে focusable হয়।
:activeতবে কী না তা নির্দেশ করার জন্য ধন্যবাদ :focus। অন্য একটি উত্তর যে সম্বোধন করে না সে সম্পর্কে আমি বিভ্রান্ত হয়ে পড়েছিলাম।
: ফোকাস হ'ল যখন কোনও উপাদান ইনপুট গ্রহণ করতে সক্ষম হয় - একটি ইনপুট বাক্সে কার্সার বা একটি লিঙ্ক যা ট্যাবড করা হয়েছে।
: সক্রিয় তখন হয় যখন কোনও উপাদান কোনও ব্যবহারকারী দ্বারা সক্রিয় করা হয় - যখন ব্যবহারকারী কোনও মাউস বোতাম টিপায় এবং তারপরে ছেড়ে দেয় তার মধ্যে সময়।
ব্যবহারকারী সেই পয়েন্টটি সক্রিয় করার সময় অ্যাক্টিভ হয় (মাউস ক্লিকের মতো, যদি আমরা ফিল্ড-টু-ফিল্ড থেকে ট্যাব ব্যবহার করি তবে সক্রিয় শৈলীর কোনও চিহ্ন নেই Maybe পয়েন্টটি সক্রিয় করা হয়েছে। এটা চেষ্টা কর :
<style type="text/css">
input { font-weight: normal; color: black; }
input:focus { color: green; outline: 1px solid green; }
input:active { color: red; outline: 1px solid red; }
</style>
<input type="text"/>
<input type="text"/>ফোকাস কেবল কীবোর্ড ইনপুট দ্বারা দেওয়া যেতে পারে, তবে একটি উপাদান একটি মাউস বা কীবোর্ড উভয় দ্বারা সক্রিয় করা যেতে পারে।
যদি কোনওটি ব্যবহার করে: কোনও লিঙ্কে ফোকাস করুন, শৈলীর নিয়ম কেবল কীবোর্ডে একটি বোটন টিপে প্রয়োগ করা হবে।
:focusযে মত কাজ করে না। আমি বর্তমানে যে পাঠ্য টাইপ করছি তাতে ফোকাস রয়েছে কারণ আমি একটি বোতাম ক্লিক করেছি। এটি এটিকে আবার বাইরে এনে ফোকাস হারাতে এবং পুনরুদ্ধার করতে পারে। মাত্র এক সেকেন্ডের মধ্যে, আমি ক্লিক করে ডানদিকে মন্তব্য যুক্ত করুন বোতামটিতে ফোকাস দিতে যাচ্ছি। এই সমস্ত কিবোর্ড ইনপুট ছাড়াই ফোকাস সৃষ্টি করে।
"ফোকাস" ব্যবহার করা কীবোর্ড ব্যবহারকারীদের মাউস ব্যবহারকারীরা যখন মাউস নিয়ে ঘোরাফেরা করে তখন একই প্রভাব দেয়। ইন্টারনেট এক্সপ্লোরারে একই প্রভাব পেতে "অ্যাকটিভ" দরকার।
বাস্তবতা হ'ল, এই রাজ্যগুলি সমস্ত ব্যবহারকারীর মতো তাদের কাজ করে না। তিনটি নির্বাচকই ব্যবহার না করা কেবলমাত্র অনেকগুলি কীবোর্ড ব্যবহারকারীদের জন্য অ্যাক্সেসযোগ্যতার সমস্যা তৈরি করে যারা শারীরিকভাবে মাউস ব্যবহার করতে অক্ষম। আমি আপনাকে # বাসা চ্যালেঞ্জ গ্রহণের জন্য আমন্ত্রণ জানাই (নমস ডট org)।
document.activeElementসম্পত্তিটি ব্যবহার করে আপনি কেন্দ্রীভূত উপাদানটি পেতে পারেন , যদিও এটি চেষ্টা করে ধরা দরকার কারণ আইই 8 ব্যতিক্রম ছুঁড়ে ফেলতে পারে। এবং সচেতন থাকুন যে ব্রাউজারগুলির পুরানো সংস্করণগুলি আচরণ করতে পারে: সক্রিয় এবং: আলাদাভাবে ফোকাস করুন।function activeElement() { try { return document.activeElement; /* can get exeption in IE8 */ } catch(e) { } }