হিসাবে কাজ করার জন্য ইনলাইন শৈলী: সিএসএসে হোভার করুন

Question 1

আমি জানি যে সিএসএস শৈলীগুলি সরাসরি এইচটিএমএল ট্যাগগুলিতে এম্বেড করা সিএসএসের বেশিরভাগ উদ্দেশ্যকে পরাস্ত করে, তবে কখনও কখনও এটি ডিবাগিং উদ্দেশ্যে কার্যকর হয় যেমন:

<p style="font-size: 24px">asdf</p>

কোনও নিয়ম এম্বেড করার জন্য সিনট্যাক্স এর মতো:

a:hover {text-decoration: underline;}

কোনও ট্যাগের শৈলীর বৈশিষ্ট্যে? স্পষ্টতই এটি নয় ...

<a href="foo" style="text-decoration: underline">bar</a>

... যেহেতু এটি সমস্ত সময় প্রয়োগ করা হবে, ঠিক যেমনটি হোভারের সময় ছিল তার বিপরীতে।

Question 2

আমি আশঙ্কা করছি এটি সম্পন্ন করা যাবে না, ছদ্ম-শ্রেণীর নির্বাচকগুলিকে ইন-লাইন সেট করা যাবে না, আপনাকে এটি পৃষ্ঠাতে বা স্টাইলশিটে করতে হবে।

আমি উল্লেখ করা উচিত যে টেকনিক্যালি আপনি উচিত এটা করতে সক্ষম হতে সিএসএস বৈশিষ্ট অনুযায়ী তবে বেশিরভাগ ব্রাউজারগুলি এটি সমর্থন করে না

সম্পাদনা করুন: আমি এটির সাথে কেবল একটি দ্রুত পরীক্ষা করেছি:

<a href="test.html" style="{color: blue; background: white} 
            :visited {color: green}
            :hover {background: yellow}
            :visited:hover {color: purple}">Test</a>

এবং এটি আই 7, আই 8 বিটা 2, ফায়ারফক্স বা ক্রোমে কাজ করে না। অন্য যে কোনও ব্রাউজারে অন্য কেউ পরীক্ষা করতে পারবেন?

Question 3

আপনি যদি কেবল ডিবাগিং করেন তবে আপনি CSS পরিবর্তন করতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন:

<a onmouseover="this.style.textDecoration='underline';" 
    onmouseout="this.style.textDecoration='none';">bar</a>

Question 4

একটি সহজ সমাধান:

   <a href="#" onmouseover="this.style.color='orange';" onmouseout="this.style.color='';">My Link</a>

বা

<script>
 /** Change the style **/
 function overStyle(object){
    object.style.color = 'orange';
    // Change some other properties ...
 }

 /** Restores the style **/
 function outStyle(object){
    object.style.color = 'orange';
    // Restore the rest ...
 }
</script>

<a href="#" onmouseover="overStyle(this)" onmouseout="outStyle(this)">My Link</a>

Question 5

এটি যদি ডিবাগিংয়ের জন্য হয় তবে কেবল ঘোরাফেরা করার জন্য একটি CSS শ্রেণি যুক্ত করুন (যেহেতু উপাদানগুলির একাধিক শ্রেণি থাকতে পারে):

a.hovertest:hover
{
text-decoration:underline;
}

<a href="http://example.com" class="foo bar hovertest">blah</a>

Question 6

অনমাইজওভার এবং অনমাউসআউট আচরণ ব্যবহার করে সিএসএস ছাড়াই হোভার পপআপ তৈরি করতে ইচ্ছুক ব্যক্তির জন্য একটি দ্রুত সমাধান আমি রেখেছি।

http://jsfiddle.net/Lk9w1mkv/

<div style="position:relative;width:100px;background:#ddffdd;overflow:hidden;" onmouseover="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">first hover<div style="width:100px;position:absolute;top:5px;left:110px;background:white;border:1px solid gray;">stuff inside</div></div>

Question 7

যদি সেই <p>ট্যাগটি জাভাস্ক্রিপ্ট থেকে তৈরি করা হয়, তবে আপনার আর একটি বিকল্প রয়েছে: ডকুমেন্টের শিরোনামে প্রোগ্রামালিভাবে স্টাইলশিট sertোকাতে জেএসএস ব্যবহার করুন। এটি সমর্থন করে '&:hover'। https://cssinjs.org/

Question 8

আমি jQuery মনে করি না সিডো-সিলেক্টরকে সমর্থন করে তবে এটি কোনও, একাধিক বা আপনার একই জাতীয় নিয়ন্ত্রণ এবং ট্যাগগুলিতে একক পৃষ্ঠায় ইভেন্ট যুক্ত করার দ্রুত উপায় সরবরাহ করে।

সর্বোপরি, আপনি ইভেন্টটি বাঁধতে শৃঙ্খল করতে পারেন এবং আপনি যদি চান তবে স্ক্রিপ্টের এক লাইনে এটি করতে পারেন। এইচটিএমএলকে চালিত বা বন্ধ করতে ম্যানুয়ালি সম্পাদনা করার চেয়ে অনেক সহজ। তারপরে আবার, যেহেতু আপনি সিএসএসে একই কাজ করতে পারেন আমি জানি না যে এটি আপনাকে কিছু কিনে (jQuery শেখার ব্যতীত)।