แสดงเด็กที่เฉพาะเจาะจงกับผู้ปกครองด้วย chilrden หลายตัว

Question

.titleoptions .ellipses {
  display: none;
}
.titleoptions:hover > .ellipses{
  display: flex;
}

<div class="bg-jibackgroundBlue border-jigreen border-l-8 border-l-solid rounded-md mb-2">
  <div class="flex items-center titleoptions">
    <div class="flex py-3">
      <img class="px-1" src="{{MEDIA_UI}}/icon-chevron-categories-24-px-active.svg" alt="">
      <p>{{label}}</p>
    </div>
    <div class="flex mr-2 relative pl-2">
      <div class="ellipses">
      <!--Find a way to change color of ellipses when hover -->
        <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
        <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
        <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
      </div>
      <div class="absolute p-2 z-40 dropdown hidden">
        <ul class="bg-white rounded-md shadow-md w-112 py-3">
          <li class="hover:bg-jibackgroundBlue">
            <a class="px-3" href="#">Add a child</a>
          </li>
          <li class="hover:bg-jibackgroundBlue">
            <a class="p-3" href="#">Rename</a>
          </li>
          <li class="hover:bg-jibackgroundBlue">
            <a class="p-3" href="#">Delete</a>
          </li>
          <li class="hover:bg-jibackgroundBlue">
            <a class="p-3" href="#">Hide</a>
          </li>
        </ul>
      </div>

    </div>

  </div>
  <!--subcategory-->
  <ul class="px-14 ml-16 pb-1 ">
    <li class="relative titleoptions">
      <div class="flex items-center">
  {{label}}
        <div class="absolute border-l border-b border-jiblueLight w-6 h-6 spacer">
        </div>
        <div class="flex mr-2 relative pl-2">
          <div class="ellipses">
          <!--Find a way to change color of ellipses when hover -->
            <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
            <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
            <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
          </div>
          <div class="absolute p-2 hidden dropdown">
            <ul class="bg-white rounded-md shadow-md w-112 py-3 font-normal">
              <li class="hover:bg-jibackgroundBlue">
                <a class="px-3" href="#">Add a child</a>
              </li>
              <li class="hover:bg-jibackgroundBlue">
                <a class="p-3" href="#">Rename</a>
              </li>
              <li class="hover:bg-jibackgroundBlue">
                <a class="p-3" href="#">Delete</a>
              </li>
              <li class="hover:bg-jibackgroundBlue">
                <a class="p-3" href="#">Hide</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <ul class="px-14 ml-16 pb-1 mt-2">
        <li class="relative titleoptions">
          <div class="flex items-center">
      {{label}}
          <div class="absolute border-l border-b border-jiblueLight w-6 h-6 spacer">
          </div>
          <div class="flex mr-2 relative pl-2">
            <div class="ellipses">
            <!--Find a way to change color of ellipses when hover -->
              <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
              <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
              <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
            </div>
            <div class="absolute p-2 hidden dropdown">
              <ul class="bg-white rounded-md shadow-md w-112 py-3 font-normal">
                <li class="hover:bg-jibackgroundBlue">
                  <a class="px-3" href="#">Add a child</a>
                </li>
                <li class="hover:bg-jibackgroundBlue">
                  <a class="p-3" href="#">Rename</a>
                </li>
                <li class="hover:bg-jibackgroundBlue">
                  <a class="p-3" href="#">Delete</a>
                </li>
                <li class="hover:bg-jibackgroundBlue">
                  <a class="p-3" href="#">Hide</a>
                </li>
              </ul>
            </div>
          </div>

        </li>
        <li class="relative titleoptions flex items-center">{{label}}
          <div class="absolute border-l border-b border-jiblueLight w-6 h-6 spacer">
          </div>
          <div class="flex mr-2 relative pl-2">
            <div class="ellipses">
            <!--Find a way to change color of ellipses when hover -->
              <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
              <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
              <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
            </div>
          
          </div>
        </li>
      </ul>
    </li>
    <li class="relative titleoptions flex items-center">{{label}}
      <div class="absolute border-l border-b border-jiblueLight w-6 h-6 spacer">
      </div>
      <div class="flex mr-2 relative pl-2">
        <div class="ellipses">
        <!--Find a way to change color of ellipses when hover -->
          <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
          <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
          <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
        </div>
        <div class="absolute p-2 hidden dropdown">
     
        </div>
      </div>
    </li>
  </ul>
</div>

ฉันกำลังสร้างต้นไม้และต้องการให้ div ที่มีคลาสที่เรียกว่าจุดไข่ปลาปรากฏขึ้นเมื่อฉันวางเมาส์เหนือ div ด้วยตัวเลือกชื่อชั้น บางเรื่องจะมีลูกที่ทุกคนมีชื่อชั้นและสไตล์เดียวกัน แต่ฉันต้องการให้เด็กคนนั้นแสดงบนโฮเวอร์เท่านั้นไม่ใช่เด็กทุกคน ฉันจะทำสิ่งนี้ให้สำเร็จได้อย่างไร?

Answer 1

คุณสามารถทำได้หลายวิธีแน่นอน เช่นเดียวกับการตั้งชื่อหรือรหัสเฉพาะให้เด็กทุกคน แต่ถ้าคุณไม่ต้องการทำเช่นนั้นคุณสามารถใช้:nth-of-type(n)ตัวเลือกได้ ตัวอย่างเช่นคุณต้องการประเภทที่สามนี้:

.titleoptions .ellipses:nth-of-type(3) {
  display: none;
}
.titleoptions:hover > .ellipses:nth-of-type(3){
  display: flex;
}

Answer 2

คุณกำลังเลือกชั้นเดียวถ้าเป็นทายาทสายตรงของ.ellipses.titleoptions

.titleoptions:hover > .ellipses{
  display: flex;
}

ลบตัวเลือก Combinator ลูก>:

.titleoptions:hover .ellipses{
  display: flex;
}