কোনও সন্তানের উপাদান ঘোরাফেরা করার সময় পিতামাতাকে কীভাবে স্টাইল করবেন?

Question

আমি জানি যে সিএসএস প্যারেন্ট সিলেক্টারের কোনও অস্তিত্ব নেই , তবে এই জাতীয় নির্বাচক ছাড়াই কোনও শিশু উপাদানকে ঘুরিয়ে দেওয়ার সময় কী প্যারেন্টিং উপাদানটি স্টাইল করা সম্ভব?

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

<div>
    <p>Lorem ipsum ...</p>
    <button>Delete</button>
</div>

খাঁটি সিএসএসের মাধ্যমে, মাউস বোতামের ওপরে উঠলে এই বিভাগটির পটভূমির রঙ কীভাবে পরিবর্তন করবেন?

Comments

এর সিএসএস প্যারেন্ট সিলেক্টারের

— টাইলার

সম্ভাব্য সমাধান: স্ট্যাকওভারফ্লো.com

— মাইকেল বেঞ্জামিন

Answer 1

ঠিক আছে, এই প্রশ্নটি আগে অনেকবার জিজ্ঞাসা করা হয়েছিল, এবং সংক্ষিপ্ত সাধারণ উত্তরটি: খাঁটি সিএসএস দ্বারা এটি করা যায় না। এটি নামে: ক্যাসকেডিং স্টাইল শিটগুলি কেবল ক্যাসকেডিং দিকের স্টাইলিং সমর্থন করে, আপ না।

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

<parent>
    <sibling></sibling>
    <child></child>
</parent>

কৌশলটি হ'ল ভাইবোনকে পিতামাতার মতো একই আকার এবং অবস্থান দেওয়া এবং পিতামাতার পরিবর্তে ভাইবোনকে স্টাইল করা। এটি দেখতে পিতামাতার মতো করে দেওয়া হবে!

এখন কিভাবে ভাইবোনের স্টাইল করবেন?

বাচ্চাটি যখন আটকানো হয় তখন পিতা-মাতা খুব থাকে, কিন্তু ভাইবোন হয় না। একই ভাইবোন জন্য যায়। ভাইবোন স্টাইলিংয়ের জন্য এটি তিনটি সম্ভাব্য সিএসএস নির্বাচক পথে শেষ হয়:

parent sibling { }
parent sibling:hover { }
parent:hover sibling { }

এই বিভিন্ন পাথ কিছু সুন্দর সম্ভাবনার জন্য অনুমতি দেয়। উদাহরণস্বরূপ, প্রশ্নটির ফলাফলের উদাহরণটিতে এই কৌতুকটি উত্সাহিত করার ফলে এই ঝাঁকুনির ফলে :

div {position: relative}
div:hover {background: salmon}
div p:hover {background: white}
div p {padding-bottom: 26px}
div button {position: absolute; bottom: 0}

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

কখনও কখনও একটি নির্দিষ্ট উপাদান নির্বাচন করতে আরও যোগ্য নির্বাচকের পথ ব্যবহার করা প্রয়োজন, যেমন এই ফিডলে দেখানো হয়েছে যা গাছের মেনুতে একাধিকবার ট্রিক প্রয়োগ করে। বেশ সুন্দর সত্যিই।

Comments

এটি হাইলাইট করার জন্য ভাল তবে আপনি ফন্টের রঙ পরিবর্তন করার চেষ্টা করলে কাজ করবে না, আমি ঠিক আছি?

— জাহানজেব খান

@ জাহানজেবখান ফন্টের রঙ পরিবর্তন করা কোনও সমস্যা নয় ।

— এনজিএলএন

Answer 2

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে আমি কেবল একটি ছদ্ম শিশু (তবে একটি ছদ্ম মোড়ক) ছাড়াই এটি পরিচালনা করেছিলাম।

আপনাকে অভিভাবক কোন সাথে থাকতে সেট করেন তাহলে pointer-events, এবং তারপর একটি শিশুর divসঙ্গে pointer-eventsসেট auto, এটি কাজ করে :)
লক্ষ্য করুন <img>(উদাহরণস্বরূপ) ট্যাগ কৌতুক করতে নেই।
সেট মনে রাখবেন pointer-eventsথেকে autoঅন্য বাচ্চাদের যা তাদের নিজস্ব ঘটনা শ্রোতা আছে, বা অন্যথায় তারা তাদের ক্লিকের কার্যকারিতা নষ্ট হয়ে যাবে না।

div.parent {  
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}    

<div class="parent">
  parent - you can hover over here and it won't trigger
  <div class="child">hover over the child instead!</div>
</div>

সম্পাদনা:
হিসাবে শ্যাডো উইজার্ড কল্যাণকামী লক্ষনীয়: এটা এই IE10 এবং নীচের জন্য না করবে না কাজ উল্লেখ করতে মূল্যহীন। (এফএফ এবং Chrome এর পুরানো সংস্করণগুলিও এখানে দেখুন )

Comments

এটি উল্লেখ করা মূল্যবান আইই 10 এবং এর জন্য কাজ করবে না। (এফএফ এবং ক্রোমের পুরানো সংস্করণগুলিও এখানে দেখুন )

— শেডো উইজার্ড আপনার পক্ষে

কারও কাছে পয়েন্টার ইভেন্ট সেট করা মানেও যে সেই উপাদানটির ইভেন্ট শ্রোতাগুলি কাজ করবে না ..!

— rhazen

@ রাহাজেন আপনি একদম ঠিক বলেছেন যদিও আমার অভিজ্ঞতা থেকে এই ব্যবহারটি সাধারণত একক ক্লিকের অঞ্চল / উপাদানের সাথে সংযুক্ত থাকে, তাই আপনি ক্লিক শ্রোতাকে পিতামাতার কাছে নির্ধারণ করতে পারেন

— লোক_ম

আমার যদি দ্বি-স্তরের, পিতা-মাতা, চাইল্ড 1 এবং চাইল্ড 1 থাকে about আমি পয়েন্টার-ইভেন্টগুলির কোনওটি পিতা-মাতার সাথে এবং পয়েন্টার-ইভেন্টগুলি স্বয়ংক্রিয়ভাবে সন্তানের সাথে যুক্ত করি নি। : আমি সন্তান 1. ডেমো এখানে শিশু ছাড়া child1 করুন হোভার করতে চান codepen.io/lion5893/pen/WNQgyVx

— ভিয়েতনামে গান Lê Quy

Answer 3

আর একটি, সহজ পদ্ধতির (একটি পুরানো প্রশ্নের কাছে) ..
উপাদানগুলি ভাইবোন হিসাবে স্থাপন করা এবং ব্যবহার করা হবে:

সংলগ্ন ভাইবোন নির্বাচক ( +) বা জেনারেল সিলিং নির্বাচক ( ~)

<div id="parent">
  <!-- control should come before the target... think "cascading" ! -->
  <button id="control">Hover Me!</button>
  <div id="target">I'm hovered too!</div>
</div>

#parent {
  position: relative;
  height: 100px;
}

/* Move button control to bottom. */
#control {
  position: absolute;
  bottom: 0;
}

#control:hover ~ #target {
  background: red;
}

এখানে ডেমো ফিডল ।

Comments

এটি শুধুমাত্র এটির জন্য কাজ করার মতো বিষয় # ডরজেটগুলি ডিওমে # নিয়ন্ত্রণের পরে আসে (যেমন আপনি পূর্ববর্তী ভাইবোনদের উপর প্রভাব ফেলতে পারবেন না, কেবলমাত্র ভাইবোনদের অনুসরণ করে)

— জিও

Answer 4

নির্বাচিত সন্তানের পিতামাতা বাছাই করার জন্য কোনও সিএসএস নির্বাচক নেই।

আপনি জাভাস্ক্রিপ্ট দিয়ে এটি করতে পারে

Comments

সত্য। child (শিশু) এর মতো কিছু h (ফাংশন () {$ (এটি) )});

— আমির আফ্রিদি

@ আমিরআফ্রিদি এটি খাঁটি জেএস নয়, আপনাকে এটির সাথে জ্যাকুয়ারি ব্যবহার করতে হবে।

— Ivotje50

Answer 5

পূর্বে উল্লিখিত হিসাবে "নির্বাচিত সন্তানের পিতামাতাদের নির্বাচনের জন্য কোনও সিএসএস নির্বাচক নেই"।

সুতরাং আপনি হয়:

• এনজিএলএন এর উত্তরে বর্ণিত হিসাবে সিএসএস হ্যাক ব্যবহার করুন
• জাভাস্ক্রিপ্ট ব্যবহার করুন - সম্ভবত jQuery এর সাথে

---

জাভাস্ক্রিপ্ট / jQuery সমাধানের জন্য উদাহরণ এখানে

জাভাস্ক্রিপ্ট দিকে:

$('#my-id-selector-00').on('mouseover', function(){
  $(this).parent().addClass('is-hover');
}).on('mouseout', function(){
  $(this).parent().removeClass('is-hover');
})

এবং সিএসএস সাইডে আপনার কাছে এমন কিছু হবে:

.is-hover {
  background-color: red;
}

Answer 6

এই সমাধানটি পুরোপুরি ডিজাইনের উপর নির্ভর করে, তবে আপনার যদি এমন কোনও পিতামাতার ডিভি থাকে যা কোনও বাচ্চা নেওয়ার সময় আপনি পটভূমিটি পরিবর্তন করতে চান তবে আপনি একটি ::after/ দিয়ে পিতামাতার অনুকরণ করার চেষ্টা করতে পারেন ::before।

<div class="item">
    design <span class="icon-cross">x</span>
</div>

সিএসএস:

.item {
    background: blue;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}
.item span.icon-cross:hover::after {
    background: DodgerBlue;
    border-radius: 10px;
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
}

এখানে একটি পূর্ণ মজার উদাহরণ দেখুন

Answer 7

যাদের খাঁটি সিএসএস সমাধানের প্রয়োজন নেই তাদের জন্য একটি সহজ জেকুরি সমাধান:

    $(".letter").hover(function() {
      $(this).closest("#word").toggleClass("hovered")
    });

.hovered {
  background-color: lightblue;
}

.letter {
  margin: 20px;
  background: lightgray;
}

.letter:hover {
  background: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="word">
  <div class="letter">T</div>
  <div class="letter">E</div>
  <div class="letter">S</div>
  <div class="letter">T</div>
</div>

Answer 8

সাসে এটি করা অত্যন্ত সহজ! এটির জন্য জাভাস্ক্রিপ্ট অনুসন্ধান করবেন না। সাসে নির্বাচিত & নির্বাচক ঠিক এটি করে।

http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand

Comments

-1 সাস সিএসএসে আরও কার্যকারিতা যুক্ত করে না, এটি কেবল লেখাকে সহজ করে তোলে। আপনি সাসে যা কিছু করতে পারেন তা CSS এবং ভিসার বিপরীতে করা যেতে পারে।

— দস্তুর

@ দস্তুর ভেরিয়েবল এবং মিক্সিং দেওয়া, আমি বলব সাস সিএসএসে একটি ভয়াবহ পরিমাণ যুক্ত করেছে। আপনি সিএসএসে এটি সমস্ত কিছু করতে পারেন, ঠিক একইভাবে আপনি এখনও সরল পুরাতন সি ব্যবহার করে অত্যাধুনিক সফ্টওয়্যার লিখতে পারেন আধুনিক ভাষাগুলি এমন কিছু সক্ষম করে না যা আগে করা যায়নি lot Sass এবং CSS এর সাথে একই।

— কোবাস ক্রুগার

@ কোবস ক্রুগার আপনার আংশিকভাবে সঠিক, তবে আপনি এই তুলনা করতে পারবেন না। সি ++ সি # এবং জাভাস্ক্রিপ্টের মতো ভাষাগুলি সি-এর ভিত্তিতে থাকতে পারে তবে রানটাইমের আগে সেগুলিতে সি পরিণত হয় না। সাস রানটাইমের আগে সিএসএসে রূপান্তরিত হয়েছে সুতরাং আপনার সত্যিকারের কোনও স্যাস স্টাইলশিট কখনই লোড করা যায় না, কেবল একটি সিএসএস।

— দস্তুর