যখন পিতামাতাকে ঘুরে বেড়ান তখন স্টাইল শিশু উপাদান


155

সন্তানের মৌলিক উপাদানের উপরে যখন কী পরিমাণ উপাদান থাকে তখন কীভাবে শিশু উপাদানের স্টাইলটি পরিবর্তন করতে হয়। আমি যদি সম্ভব হয় তবে এর জন্য একটি সিএসএস সমাধান পছন্দ করব prefer এর মাধ্যমে কি কোনও সমাধান সম্ভব: সিএসএস নির্বাচককে হোভার করুন। প্রকৃতপক্ষে যখন প্যানেলে কোনও হোভার থাকে তখন প্যানেলের অভ্যন্তরে অপশন বারের রঙ পরিবর্তন করতে হবে।

সমস্ত বড় ব্রাউজার সমর্থন খুঁজছেন।

উত্তর:


273

হ্যাঁ, আপনি অবশ্যই এটি করতে পারেন। যেমন কিছু ব্যবহার করুন

.parent:hover .child {
   /* ... */
}

এই পৃষ্ঠা অনুসারে এটি সমস্ত বড় ব্রাউজার দ্বারা সমর্থিত।


8
আপনাকে ধন্যবাদ, আপনি স্রেফ CSS3 দিয়ে আমার ওয়েব পৃষ্ঠাটি জীবনে আসতে আমাকে সহায়তা করেছেন।
নিক তারাগুলি

1
পরিশেষে কী জিজ্ঞাসা করতে হবে তা জানতে সিএসএস শিখেছি, সাহায্যের জন্য ধন্যবাদ! মনে রাখবেন যে এটি সমস্ত বংশধরদের জন্য প্রযোজ্য, আপনি যদি কেবল শিশুদের চান তবে আমার মনে হয় আপনার প্রয়োজন .parent:hover > .child?
উইলিয়াম টি। ম্যালার্ড

8

হ্যাঁ, আপনি নীচের কোডটি এটি ব্যবহার করতে পারেন এটি এটি করতে পারেন।

.parentDiv{
margin : 25px;

}
.parentDiv span{
  display : block;
  padding : 10px;
  text-align : center;
  border: 5px solid #000;
  margin : 5px;
}

.parentDiv div{
padding:30px;
border: 10px solid green;
display : inline-block;
align : cente;
}

.parentDiv:hover{
  cursor: pointer;
}

.parentDiv:hover .childDiv1{
border: 10px solid red;
}

.parentDiv:hover .childDiv2{
border: 10px solid yellow;
} 
.parentDiv:hover .childDiv3{
border: 10px solid orange;
}
<div class="parentDiv">
<span>Hover me to change Child Div colors</span>
  <div class="childDiv1">
    First Div Child
  </div>
  <div class="childDiv2">
    Second Div Child
  </div>
  <div class="childDiv3">
    Third Div Child
  </div>
  <div class="childDiv4">
    Fourth Div Child
  </div>
</div>


10
পার্টির জন্য এত দেরি
ধেরিয়া

4
এই উত্তরটি কিছু ব্যাখ্যা থেকে উপকৃত হবে। আমার কাছে মনে হয় যে এখানে প্রয়োজনীয় কোডের চেয়ে আরও বেশি কোড রয়েছে এবং কোডটির কোন অংশে আমাদের ফোকাস করা উচিত তা পরিষ্কার নয়।
পল রুনি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.