Mostrar niño específico a padre con varios niños
.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>
Estoy creando un árbol y quiero que se muestre el div con la clase llamada puntos suspensivos cuando paso el mouse sobre el div con la opción de título de clase. Algunos de los títulos tendrán niños que tienen el mismo nombre de clase y estilo, pero solo quiero que el niño en particular se muestre al pasar el mouse y no todos los niños. ¿Cómo puedo lograr esto?
Respuestas
Puedes hacerlo de muchas maneras, por supuesto. Como darle a cada niño un nombre o identificación específica, pero si no quiere hacer eso, simplemente puede usar el :nth-of-type(n)
selector. Por ejemplo, desea el tercero de este tipo:
.titleoptions .ellipses:nth-of-type(3) {
display: none;
}
.titleoptions:hover > .ellipses:nth-of-type(3){
display: flex;
}
Está seleccionando la .ellipses
clase solo si es un descendiente directo de .titleoptions
.
.titleoptions:hover > .ellipses{
display: flex;
}
Retire el selector combinador hijo >
:
.titleoptions:hover .ellipses{
display: flex;
}