Показать конкретного ребенка родителю с несколькими детьми
.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 с опцией заголовка класса. У некоторых заголовков будут дочерние элементы, которые имеют одинаковое имя класса и стиль, но я хочу, чтобы при наведении отображался только конкретный дочерний элемент, а не все дочерние элементы. Как я могу этого добиться?
Ответы
Конечно, вы можете сделать это разными способами. Это как дать каждому ребенку конкретное имя или идентификатор, но если вы не хотите этого делать, вы можете просто использовать :nth-of-type(n)
селектор. Например, вам нужна третья фигура этого типа:
.titleoptions .ellipses:nth-of-type(3) {
display: none;
}
.titleoptions:hover > .ellipses:nth-of-type(3){
display: flex;
}
Вы выбираете .ellipses
класс, только если он является прямым потомком .titleoptions
.
.titleoptions:hover > .ellipses{
display: flex;
}
Удалите селектор дочернего комбинатора >
:
.titleoptions:hover .ellipses{
display: flex;
}