Perlihatkan anak tertentu untuk orang tua dengan beberapa anak

Aug 20 2020

.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>

Saya membuat pohon dan ingin div dengan kelas yang disebut elipsis untuk ditampilkan saat saya mengarahkan kursor ke div dengan opsi judul kelas. Beberapa judul akan memiliki anak yang semuanya memiliki nama kelas dan gaya yang sama tetapi saya hanya ingin anak tertentu ditampilkan di hover dan tidak semua anak. Bagaimana saya bisa melakukannya?

Jawaban

AminDarian Aug 20 2020 at 02:18

Anda bisa melakukannya dengan banyak cara tentunya. Seperti memberi setiap anak nama atau id tertentu, tetapi jika Anda tidak ingin melakukan itu, Anda cukup menggunakan :nth-of-type(n)selector. Misalnya, Anda menginginkan yang ketiga dari tipe ini:

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

DanMullin Aug 20 2020 at 00:38

Anda memilih .ellipseskelas hanya jika itu adalah keturunan langsung dari .titleoptions.

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

Lepaskan pemilih kombinator anak >:

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