いくつかの子供を持つ親に特定の子供を表示します
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>
ツリーを作成していて、クラスtitleoptionを指定してdivにカーソルを合わせると、省略記号というクラスのdivが表示されるようにします。一部のタイトルには、すべて同じクラス名とスタイルの子が含まれますが、すべての子ではなく、特定の子だけをホバーに表示したいと思います。どうすればこれを達成できますか?
回答
AminDarian Aug 20 2020 at 02:18
もちろん、さまざまな方法でそれを行うことができます。すべての子に特定の名前またはIDを付けるのと同じですが、それを望まない場合は、:nth-of-type(n)
セレクターを使用するだけです。たとえば、次のタイプの3番目が必要です。
.titleoptions .ellipses:nth-of-type(3) {
display: none;
}
.titleoptions:hover > .ellipses:nth-of-type(3){
display: flex;
}
DanMullin Aug 20 2020 at 00:38
の.ellipses
直接の子孫である場合にのみ、クラスを選択し.titleoptions
ます。
.titleoptions:hover > .ellipses{
display: flex;
}
子コンビネータセレクターを削除し>
ます。
.titleoptions:hover .ellipses{
display: flex;
}