কীভাবে লিখবেন: শর্তের জন্য একটি: আগে এবং পরে: পরে?

Question

কীভাবে লিখবেন :hoverএবং :visitedশর্ত a:before?

আমি চেষ্টা করছি a:before:hoverকিন্তু কাজ করছে না

Answer 1

আপনি প্রকৃতপক্ষে যা করার চেষ্টা করছেন তার উপর এটি নির্ভর করে।

যদি :beforeউপাদানটি aছদ্ম-শ্রেণীর সাথে মেলে আপনি কেবল ছদ্ম-উপাদানগুলিতে শৈলী প্রয়োগ করতে চান তবে আপনাকে লিখতে a:hover:beforeবা a:visited:beforeপরিবর্তে তার প্রয়োজন। লক্ষ করুন সিউডো-এলিমেন্টটি সিউডো-ক্লাসের পরে আসে (এবং বাস্তবে পুরো নির্বাচকটির একেবারে শেষে)। এও লক্ষ্য করুন যে এগুলি দুটি ভিন্ন জিনিস; তাদের উভয়কে "সিউডো-সিলেক্টর" বলা আপনাকে একবার বিভ্রান্ত করতে চলেছে আপনি একবার যেমন সিনট্যাক্স সমস্যায় পড়লে।

আপনি যদি সিএসএস 3 লিখছেন তবে এই পার্থক্যটি আরও স্পষ্ট করার জন্য আপনি ডাবল কলোন সহ একটি সিউডো উপাদানটি বোঝাতে পারেন। সুতরাং, a:hover::beforeএবং a:visited::before। তবে আপনি যদি আইই 8 এবং তার চেয়ে বেশি বয়স্ক লিগ্যাসি ব্রাউজারগুলির জন্য বিকাশ করছেন তবে আপনি একক কলোন ব্যবহার করে ঠিকই চলে যেতে পারেন।

সিউডো-ক্লাস এবং সিউডো-উপাদানের এই নির্দিষ্ট অনুক্রমে বলা বৈশিষ্ট :

একটি সিউডো-এলিমেন্ট কোনও নির্বাচকের সাধারণ নির্বাচকদের শেষ ক্রমটিতে যুক্ত হতে পারে।

সাধারণ নির্বাচকদের একটি অনুক্রম হল সরল নির্বাচকগুলির একটি শৃঙ্খল যা কোনও সংযোজক দ্বারা পৃথক নয়। এটি সর্বদা প্রকার নির্বাচক বা সর্বজনীন নির্বাচক দিয়ে শুরু হয়। অনুক্রমে অন্য কোনও ধরণের নির্বাচক বা সর্বজনীন নির্বাচক অনুমোদিত নয়।

একটি সাধারণ নির্বাচক হয় হয় টাইপ সিলেক্টর, সার্বজনীন সিলেক্টর, অ্যাট্রিবিউট সিলেক্টর, ক্লাস সিলেক্টর, আইডি সিলেক্টর বা সিউডো-ক্লাস।

একটি সিউডো-ক্লাস একটি সাধারণ নির্বাচক। একটি সিউডো-এলিমেন্টটি যদিও এটি সাধারণ নির্বাচকের মতো দেখা যায় না not

তবে, ব্যবহারকারী-অ্যাকশন সিউডো-ক্লাসের জন্য যেমন :hover¹ , যদি ব্যবহারকারী কেবলমাত্র সিউডো-এলিমেন্টের সাথে ইলিমেন্টের সাথে যোগাযোগ না করে কেবল তখনই এই প্রভাবটি প্রয়োগ করতে পারেন a, তবে এটি কিছু অস্পষ্ট লেআউট-নির্ভর ওয়ার্কআউন্ড ছাড়া অন্য কিছু সম্ভব নয় । পাঠ্য দ্বারা বোঝানো হয়েছে, স্ট্যান্ডার্ড সিএসএস সিউডো-উপাদানগুলির সিউডো-ক্লাস থাকতে পারে না। :hoverসেক্ষেত্রে আপনাকে ছদ্ম-উপাদানগুলির পরিবর্তে একটি সত্যিকারের শিশু উপাদানকে প্রয়োগ করতে হবে ।

---

¹ _{অবশ্যই, এটি ছদ্ম-শ্রেণীর লিঙ্কগুলির ক্ষেত্রে প্রযোজ্য নয় যেমন :visitedপ্রশ্নের ক্ষেত্রে, কারণ ছদ্ম-উপাদানগুলি লিঙ্ক নয়।}

Comments

এটি উল্লেখ করা উচিত যে এটি প্যারেন্ট উপাদানটির উপর ঝাঁকুনি দেয় - যার ফলে অলঙ্করণটি প্রয়োগ করা যেতে পারে যদিও :: সিউডোলেমেন্ট মাউসের অধীনে না থাকলেও তার পিতামাতা যতক্ষণ না।

— সামগুডি

এটিও লক্ষ করা উচিত যে বেশ কয়েকটি বিষয় রয়েছে যা লেআউটের নিয়মগুলি নির্দিষ্ট করে দেওয়ার কারণে এটির প্রতিক্রিয়া জানায় না - যেমন text-decoration।

— ক্রিস ক্র্যাচো

@ ক্রিস ক্রাইচো: প্রকৃতপক্ষে - আমি এখানে সিউডো-উপাদানগুলির বিষয়ে এই নির্দিষ্ট ইস্যুটির ব্যাখ্যা পেতে পারি । অবশ্যই, এটি স্পষ্ট করে বলার অপেক্ষা রাখে না যে ইস্যুটির সিউডো-শ্রেণি / সিউডো-উপাদান নির্বাচকগুলির সাথে নিজের কোনও সংযোগ নেই , তবে আপনি যেমন উল্লেখ করেছেন তেমন একটি লেআউট ইস্যু।

— BoltClock

আমি এই মন্তব্যটি ছাড়ার খুব শীঘ্রই @ বোল্টক্লক আমি সেই উত্তরটিকে অগ্রাহ্য করেছি । Huzzah।

— ক্রিস ক্র্যাচো

সিনজ কোলন (:) সিউডো-ক্লাস এবং ডাবল কোলন (: :) সিউডো-এলিমেন্টকে মনোনীত করে। সুতরাং এটি হওয়া উচিত: হোভার :: এর আগে

— মিক্কেলব্রাম

Answer 2

a:hover::beforeপরিবর্তে লিখুন a::before:hover: উদাহরণ ।

Comments

@ মিক্কেলব্রেম আপনার কাছে কি প্রমাণ করার জন্য একটি রেফারেন্স আছে?

— শেয়া

@ বাংজিশিয়া: এটি CSS3 সিনট্যাক্স ax আমার উত্তরের মতামত দেখুন (পাশাপাশি আমার সাম্প্রতিক সম্পাদনা)। এটিকে "" সঠিক সংশ্লেষ বলা যদিও সামান্য ভুল কারণ সিএসএস 1/2 সিউডো-উপাদানগুলির জন্য একক এবং ডাবল উভয় কোলনেরই অনুমতি রয়েছে। পরিবর্তে আমি এটিকে প্রস্তাবিত বাক্য গঠন বলব , কারণ আজ লিগ্যাসি সিনট্যাক্স ব্যবহার চালিয়ে যাওয়ার একমাত্র কারণ হ'ল আইই 8 এবং তার চেয়েও বেশি বয়স্ককে সমর্থন করা।

— BoltClock

সিএমএস 2 :afterবনাম সিএসএস 3 ::after ডেভেলপার.মোজিলা.আর.এন.ইউএস / ডকস / ওয়েব / সিএসএস / ::: এর পরে @ মিক্কেলব্রেম @ শ্যাশাবঞ্জ আরও তথ্য ( এককটির আরও :ভাল সমর্থন রয়েছে)

— ট্র্যাভিস

এটি আন্ডারলাইনের জন্য কাজ করছে না :( jsfiddle.net/porচারowski/u5dhthvq দয়া করে আরও প্রদর্শন করুন: ইনলাইন-ব্লক; jsfiddle.net/por

— ਚੇ

Answer 3

মাউসওভারটিতে মেনু লিঙ্কটির পাঠ্য পরিবর্তন করতে। (হোভারে বিভিন্ন ভাষার পাঠ্য) এখানে is

jsfiddle উদাহরণ

এইচটিএমএল:

<a align="center" href="#"><span>kannada</span></a>

CSS:

span {
    font-size:12px;
}
a {
    color:green;
}
a:hover span {
    display:none;
}
a:hover:before {
    color:red;
    font-size:24px;
    content:"ಕನ್ನಡ";
}

Comments

এটি একটি সুন্দর উত্তর। প্রকৃতপক্ষে, এটি প্রতিস্থাপন পাঠ্যের সাথে মিলে স্প্যান পাঠ্যের ফন্ট-আকারকে 24px তে বাড়িয়ে আমার ফিডলটি সামান্য প্রসারিত করতে অনুপ্রেরণা জাগিয়েছে, প্রতিস্থাপন পাঠ্যের আগে এবং পরে 3 টি অবিচ্ছেদী স্থান যুক্ত করেছে যাতে তারা একই প্রস্থটি দখল করে, এবং স্টাইল a:hover::beforeসঙ্গে text-decoration: underline, যা প্রতিস্থাপন লেখার লাল রং নিতে নিম্নরেখা ঘটায়।

— ডেভ ল্যান্ড

Answer 4

এটি ব্যবহার করার চেষ্টা করুন .card-listing:hover::after hoverএবং এটি কাজ করবেafter::

Answer 5

বোল্টক্লকের উত্তর সঠিক। কেবলমাত্র আমি যুক্ত করতে চাই তা যদি আপনি কেবল ছদ্ম উপাদানটি নির্বাচন করতে চান তবে একটি স্প্যান দিন।

উদাহরণ স্বরূপ:

<li><span data-icon='u'></span> List Element </li>

পরিবর্তে:

<li> data-icon='u' List Element</li>

এইভাবে আপনি সহজভাবে বলতে পারেন

ul [data-icon]:hover::before {color: #f7f7f7;}

যা কেবলমাত্র সিউডো উপাদানটি হাইলাইট করবে, পুরো লি উপাদানটি নয়

Answer 6

ডান পয়েন্টেড ব্র্যাকেট (">") ব্যবহার করে আপনি নিজের ক্রিয়াকে কেবল একটি শ্রেণিতে সীমাবদ্ধ করতে পারেন, যেমনটি আমি এই কোডটিতে করেছি:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    span {
    font-size:12px;
    }
    a {
        color:green;
    }
    .test1>a:hover span {
        display:none;
    }
    .test1>a:hover:before {
        color:red;
        content:"Apple";
    }
  </style>
</head>

<body>
  <div class="test1">
    <a href="#"><span>Google</span></a>
  </div>
  <div class="test2">
    <a href="#"><span>Apple</span></a>
  </div>
</body>

</html>

দ্রষ্টব্য: হোভার: স্যুইচ কেবলমাত্র