যখন কোনও উপাদান আবদ্ধ হয় তখন কীভাবে অন্যান্য উপাদানগুলিকে প্রভাবিত করবেন

Question

আমি যখন যা করতে চাই তা যখন কোনও নির্দিষ্টকে divআটকানো হয় তখন এটি অন্যের বৈশিষ্ট্যগুলিকে প্রভাবিত করে div।

উদাহরণস্বরূপ, এই জেএসফিডাল ডেমোতে , আপনি যখন এটি ঘুরে দেখেন তখন #cubeপরিবর্তন হয় background-colorতবে আমি যা চাই তা হ'ল আমি যখন ঘুরে বেড়াই#container , #cubeপ্রভাবিত হয়।

div {
  outline: 1px solid red;
}
#container {
  width: 200px;
  height: 30px;
}
#cube {
  width: 30px;
  height: 100%;
  background-color: red;
}
#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}

<div id="container">

  <div id="cube">
  </div>

</div>

Answer 1

কিউবটি সরাসরি ধারকের ভিতরে থাকলে:

#container:hover > #cube { background-color: yellow; }

যদি ঘনক্ষেত্রটি (ধারকগুলি বন্ধ করার পরে) ধারকটির পাশে থাকে:

#container:hover + #cube { background-color: yellow; }

ঘনক্ষেত্রটি ধারকের ভিতরে কোথাও থাকলে:

#container:hover #cube { background-color: yellow; }

যদি কিউবটি ধারকটির একটি ভাইবোন হয়:

#container:hover ~ #cube { background-color: yellow; }

Comments

সাধারণ সহোদর combinator ভুলবেন না ~জন্য 'ঘনক্ষেত্র DOM এবং শেয়ার একটি পিতা বা মাতা মধ্যে ধারক পর কোথাও'

— robertc

যে বেশ শান্ত. এমন কোনও উত্স আছে যেখানে আমি সে সম্পর্কে আরও তথ্য জানতে পারি? এটি কি সমস্ত ব্রাউজার দ্বারা সমর্থিত, এটি কি CSS3? সে সম্পর্কে আরও কিছু তথ্য পেয়ে দারুণ লাগবে। অনেক ধন্যবাদ!

— বেনামে

+1 দুর্দান্ত উত্তর @ মাইক। হলে কি #containerপরবর্তী হয় #cube, অর্থাত্ #containerঅনুসরণ #cube?

— পিটারকাএ

হোল্ডেড এলিমেন্টটি ধারকটির ভিতরে থাকলে কী করণীয় (যে আমরা প্রভাবিত হতে চাই) ??? উদাহরণস্বরূপ: # কিউব: হোভার # কনটেনার {কিছু সিএসএস এফেক্টস}

— হানজাল্লাহ আফগান

ভাল উত্তর !! আমি যখন বাচ্চাটিকে হোভার করি তখন আমি পিতামাতার পরিবর্তন করতে চাই তবে কী হবে। আমি মনে করি এর জন্য কোনও নির্বাচক নেই।

— মাইকেল

Answer 2

এই বিশেষ উদাহরণে, আপনি ব্যবহার করতে পারেন:

#container:hover #cube {
    background-color: yellow;   
}

এই উদাহরণটি কেবলমাত্র তখন থেকেই কাজ করে cubeযা একটি শিশু container। আরও জটিল পরিস্থিতিতে আপনার বিভিন্ন সিএসএস ব্যবহার করতে হবে বা জাভাস্ক্রিপ্ট ব্যবহার করতে হবে।

Answer 3

কোনও প্রদত্ত ব্যক্তির উপরে ঘোরাফেরা করার সময় অন্য উপাদানগুলির স্টাইলিংয়ের জন্য সাইলিং সিলেক্টরটি সাধারণ সমাধান, তবে এটি কেবল তখনই কাজ করে যদি অন্য উপাদানগুলি ডিওমে প্রদত্তটিকে অনুসরণ করে । যখন অন্যান্য উপাদানগুলি প্রকৃত অর্ধবৃত্তের আগে হওয়া উচিত তখন আমরা কী করতে পারি? বলুন আমরা নীচের মত একটি সংকেত বার রেটিং উইজেট বাস্তবায়ন করতে চাই:

এটি আসলে সহজে সিএসএস flexbox মডেল ব্যবহার করা যেতে পারে, সেটিং দ্বারা flex-directionকরতে reverse, যাতে উপাদানের এক তারা DOM মধ্যে আছেন থেকে বিপরীত অনুক্রমে প্রদর্শন করা হয়। উপরের স্ক্রিনশটটি এমন একটি উইজেট থেকে নেওয়া, খাঁটি সিএসএস সহ প্রয়োগ করা হয়েছে।

আধুনিক ব্রাউজারগুলির 95% দ্বারা ফ্লেক্সবক্স খুব ভালভাবে সমর্থিত ।

.rating {
  display: flex;
  flex-direction: row-reverse;
  width: 9rem;
}
.rating div {
  flex: 1;
  align-self: flex-end;
  background-color: black;
  border: 0.1rem solid white;
}
.rating div:hover {
  background-color: lightblue;
}
.rating div[data-rating="1"] {
  height: 5rem;
}
.rating div[data-rating="2"] {
  height: 4rem;
}
.rating div[data-rating="3"] {
  height: 3rem;
}
.rating div[data-rating="4"] {
  height: 2rem;
}
.rating div[data-rating="5"] {
  height: 1rem;
}
.rating div:hover ~ div {
  background-color: lightblue;
}

<div class="rating">
  <div data-rating="1"></div>
  <div data-rating="2"></div>
  <div data-rating="3"></div>
  <div data-rating="4"></div>
  <div data-rating="5"></div>
</div>

Comments

এটি কি এডিট করা যায় যাতে 1 বার থেকে অন্য বারে মাউসটি সরানোর সময় হাইলাইটটি অদৃশ্য হয়ে যায়? ঝলকানি কিছুটা বিভ্রান্তিকর।

— সার্বারবাস

@ কারব্রাস: মাউস বারের মধ্যে থাকা অবস্থায় এমন একটি সমাধান যুক্ত করা হয়েছে যা হভারটি আড়াল করে না। ডাউনসাইড হ'ল বারগুলির প্রস্থ আর সমান নয়।

— ড্যান ড্যাসক্লেস্কু

আপনার প্রথম স্নিপেটে এটি ব্যবহার করে দেখুন: চালু করুন .rating div, মার্জিনটি সরিয়ে দিন এবং যুক্ত করুনborder-right: 4px solid white;

— সার্বারবাস

ফ্লেক্স দিক (আই এর পক্ষে ভালভাবে সমর্থিত নয়) বা ডিফল্ট অনুসারে কালো 2) কন্টেইনারটির উপরে মাউসের সমস্ত নীল 3) বার হোভারে পরবর্তী ভাইবোনটির জন্য কালো :)

— স্টিফেন ম্যাথিস

আমি এই ঝাঁকুনিটি তৈরি করেছি যা (কমপক্ষে আমার জন্য) এটিকে এখানে যা চলছে তার থেকে একটু বেশি স্পষ্ট করে তুলেছে। jsfiddle.net/maxshuty/cj55y33p/3

— ম্যাক্সশুটি

Answer 4

মাইক এবং রবার্টকে তাদের সহায়ক পোস্টগুলির জন্য অনেক ধন্যবাদ!

আপনার এইচটিএমএলে যদি দুটি উপাদান থাকে এবং আপনি চান :hover একটির উপরে ও অন্যের মধ্যে একটি শৈলীর পরিবর্তন লক্ষ্য তবে দুটি উপাদান অবশ্যই সরাসরি সম্পর্কিত হতে হবে - পিতা-মাতা, শিশু বা ভাইবোন। এর অর্থ এই যে দুটি উপাদান অবশ্যই একটির অন্যের মধ্যে থাকতে পারে বা উভয়ই একই বৃহত্তর উপাদানের মধ্যে থাকা আবশ্যক।

আমার ব্যবহারকারীরা আমার সাইটের মাধ্যমে এবং :hoverহাইলাইট হওয়া শর্তগুলি পড়ার সাথে সাথে আমি ব্রাউজারের ডানদিকে একটি বাক্সে সংজ্ঞা প্রদর্শন করতে চেয়েছিলাম ; সুতরাং, আমি চাইনি যে 'পাঠ্য' উপাদানটির ভিতরে 'সংজ্ঞা' উপাদানটি প্রদর্শিত হোক।

আমি প্রায় ছেড়ে দিয়েছি এবং আমার পৃষ্ঠায় জাভাস্ক্রিপ্ট যুক্ত করেছি, তবে এটিই ভবিষ্যতের ডাং! আমাদের পছন্দসই প্রভাবগুলি অর্জন করতে আমাদের উপাদানগুলি কোথায় রাখতে হবে তা জানিয়ে আমাদের সিএসএস এবং এইচটিএমএল থেকে ব্যাক সাস সহ্য করা উচিত নয়! শেষ পর্যন্ত আমরা আপস করলাম।

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

এইচটিএমএল:

<div id="explainBox" class="explainBox"> /*Common parent*/

  <a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light                            /*highlighted term in text*/
  </a> is as ubiquitous as it is mysterious. /*plain text*/

  <div id="definitions"> /*Container for :hover-displayed definitions*/
    <p class="def" id="light"> /*example definition entry*/ Light:
      <br/>Short Answer: The type of energy you see
    </p>
  </div>

</div>

সিএসএস:

/*read: "when user hovers over #light somewhere inside #explainBox
    set display to inline-block for #light directly inside of #definitions.*/

#explainBox #light:hover~#definitions>#light {
  display: inline-block;
}

.def {
  display: none;
}

#definitions {
  background-color: black;
  position: fixed;
  /*position attribute*/
  top: 5em;
  /*position attribute*/
  right: 2em;
  /*position attribute*/
  width: 20em;
  height: 30em;
  border: 1px solid orange;
  border-radius: 12px;
  padding: 10px;
}

এই উদাহরণে একটি লক্ষ্য :hoverমধ্যে একটি উপাদান থেকে কমান্ড #explainBoxআবশ্যক পারেন হতে #explainBoxমধ্যে অথবা এছাড়াও #explainBox। #explainBoxপ্রযুক্তিগতভাবে এইচটিএমএল ডকুমেন্টের মধ্যে অবাঞ্ছিত অবস্থানে থাকা সত্ত্বেও # সংজ্ঞাগুলিতে নির্ধারিত অবস্থানের বৈশিষ্ট্যগুলি এটিকে পছন্দসই স্থানে (বাহিরে ) উপস্থিত হতে বাধ্য করে ।

আমি বুঝতে পারি যে এটি #idএকাধিক এইচটিএমএল উপাদানের জন্য একই ব্যবহার করা খারাপ ফর্ম হিসাবে বিবেচিত হয় ; তবে, এই ক্ষেত্রে #lightস্বতন্ত্রভাবে #id'ডি উপাদানগুলিতে স্ব স্ব অবস্থানের কারণে স্বতন্ত্রভাবে বর্ণনা করা যেতে পারে । id #lightএই ক্ষেত্রে পুনরাবৃত্তি না করার কোনও কারণ আছে কি ?

Comments

এই জাতীয় একটি সংক্ষিপ্ত পয়েন্টের জন্য দীর্ঘ উত্তর, তবে এখানে এটির একটি জেসফিল্ড রয়েছে jsfiddle.net/ubershmekel/bWgq6/1

— ubershmekel

আপনি একই IDএকাধিকবার ব্যবহার করার সময় কিছু ব্রাউজার ফাঁকা হয়ে যাবে । শুধু একটি ব্যবহার করুন class।

— সার্জ সাগান

Answer 5

এটি কেবল আমার জন্য কাজ করেছে:

#container:hover .cube { background-color: yellow; }

যেখানে .cubeএর সিএসসি ক্লাস #cube।

ফায়ারফক্স , ক্রোম এবং এজতে পরীক্ষিত ।

Answer 6

এখানে আরেকটি ধারণা যা আপনাকে কোনও নির্দিষ্ট নির্বাচক বিবেচনা না করে এবং কেবলমাত্র ব্যবহার করে অন্যান্য উপাদানগুলিকে প্রভাবিত করতে দেয় :hover মূল উপাদানটির অবস্থা ।

এর জন্য, আমি কাস্টম সম্পত্তি (সিএসএস ভেরিয়েবল) ব্যবহারের উপর নির্ভর করব। যেমন আমরা স্পেসিফিকেশন পড়তে পারেন :

কাস্টম বৈশিষ্ট্যগুলি সাধারণ বৈশিষ্ট্য , তাই এগুলি যে কোনও উপাদান হিসাবে ঘোষণা করা যায়, সাধারণ উত্তরাধিকার এবং ক্যাসকেড বিধি দিয়ে সমাধান করা হয় ...

ধারণাটি হ'ল মূল উপাদানটির মধ্যে কাস্টম বৈশিষ্ট্যগুলি সংজ্ঞায়িত করা এবং শিশু উপাদানগুলিকে স্টাইল করতে তাদের ব্যবহার করা এবং যেহেতু এই বৈশিষ্ট্যগুলি উত্তরাধিকার সূত্রে প্রাপ্ত হয় আমরা কেবল হভারের মূল উপাদানটির মধ্যে সেগুলি পরিবর্তন করতে পারি।

এখানে একটি উদাহরণ:

#container {
  width: 200px;
  height: 30px;
  border: 1px solid var(--c);
  --c:red;
}
#container:hover {
  --c:blue;
}
#container > div {
  width: 30px;
  height: 100%;
  background-color: var(--c);
}

<div id="container">
  <div>
  </div>
</div>

হোভারের সাথে একত্রে নির্দিষ্ট নির্বাচক ব্যবহারের চেয়ে কেন এটি আরও ভাল হতে পারে?

আমি কমপক্ষে 2 টি কারণ প্রদান করতে পারি যা এই পদ্ধতিটিকে বিবেচনা করার জন্য একটি ভাল করে তোলে:

1. যদি আমাদের অনেক নেস্টেড উপাদান থাকে যা একই শৈলীর ভাগ করে নেয়, তবে এগুলি আমাদের সমস্ত নির্বাচিতকে হোভারের লক্ষ্যবস্তু করতে জটিল নির্বাচনকারীকে এড়িয়ে চলবে। কাস্টম বৈশিষ্ট্যগুলি ব্যবহার করে, প্যারেন্ট উপাদানগুলিতে ঘোরাঘুরি করার সময় আমরা কেবল মানটি পরিবর্তন করি।
2. যে কোনও সম্পত্তির মান এবং এর একটি আংশিক মান প্রতিস্থাপন করতে একটি কাস্টম সম্পত্তি ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ আমরা একটি রং জন্য একটি কাস্টম সম্পত্তি সংজ্ঞায়িত এবং আমরা একে মধ্যে এটি ব্যবহার করতে পারেন border, linear-gradient, background-color, box-shadowইত্যাদি এটা আমাদের সব হোভার উপর এই বৈশিষ্ট্য পুনরায় সেট করা হচ্ছে এড়াতে হবে।

এখানে আরও জটিল উদাহরণ:

.container {
  --c:red;
  width:400px;
  display:flex;
  border:1px solid var(--c);
  justify-content:space-between;
  padding:5px;
  background:linear-gradient(var(--c),var(--c)) 0 50%/100% 3px no-repeat;
}
.box {
  width:30%;
  background:var(--c);
  box-shadow:0px 0px 5px var(--c);
  position:relative;
}
.box:before {
  content:"A";
  display:block;
  width:15px;
  margin:0 auto;
  height:100%;
  color:var(--c);
  background:#fff;
}

/*Hover*/
.container:hover {
  --c:blue;
}

<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>

আমরা উপরে দেখতে পাচ্ছি, বিভিন্ন উপাদানগুলির অনেকগুলি বৈশিষ্ট্য পরিবর্তন করতে আমাদের কেবল একটি সিএসএস ঘোষণার প্রয়োজন ।