0

Mi duda concretamente es la siguiente, si yo tengo el siguiente codigo:

<ul class="skills-list">
    <li *ngFor="let skill of skills" class="skills">{{skill.nombreSkill}}</li>
</ul>

donde voy recorriendo un array y armando una lista, hay una forma para que yo al hacer hover sobre algun item se hagan dos botones? ya que quiero poner la posibilidad de editar o eliminar ese item dejo dos imagenes para que sea un poco mas grafico quiero que mi elemento se va normal introducir la descripción de la imagen aquí

y que al pasar el mouse aparesca alguna opcion como esos tres puntos en la esquina derecha

introducir la descripción de la imagen aquí

3
  • Si se puede. Cada li debe contener un div que será el contenedor del icono de tres puntos para abrir un menú que tendrá las opciones en botón con funciones Commented el 6 oct. 2022 a las 21:29
  • claro pero mi duda esta mas enfocada en como hago para que esos 3 puntitos solo aparezcan cuando yo paso el mouse por encima solamente
    – user300807
    Commented el 6 oct. 2022 a las 21:59
  • Como te dije, debe estar en el li en el HTML o agregando desde una base de javascript e inicialmente debe estar invisible. Luego al hacer hover que se vea con opacity, display block, o translate o como sea Commented el 6 oct. 2022 a las 22:10

1 respuesta 1

2

Ok, supongamos que los tres puntos son un círculo.

//HTML
<ul class="skills-list">
<div class="container"> 
    <li class"dot" *ngFor="let skill of skills" class="skills" {{skill.nombreSkill}}</li>
</div>

</ul>
//CSS
.dot{
    background: lightblue;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: none;
}

.container:hover{
   cursor:pointer;
   .dot{
     display:block;
   }
}

Puedes aplicar la misma lógica con cualquier elemento, pueden ser botones, texto, etc etc. Básicamente lo que sucede es que todos los elementos tienen el círculo pero display:none hace que no sea visible, cuando agregamos container:hover le decimos que cuando el mouse este sobre el contenedor el elemento se haga visible.

4
  • Genial y a ese circulo en este caso que se genera, hay una forma de que al apretarlo haga alguna funcion? porque entiendo que se ve pero por lo que entiendo yo solo seria un circulo visible sin funcion
    – user300807
    Commented el 6 oct. 2022 a las 22:33
  • Claro, en este caso puedes crear un botón al cual le agregas una clase "myBtt", esta clase por defecto en css le colocas el display:none; Y en el contenedor en este caso tu li colocas la función de hover, que haga visible la clase "myBtt" con display:block. Espero haber sido claro, caso contrario responde el comentario y seré más específico si lo requieres. Al agregar un botón ya puedes hacer click e interactuar con el. Aunque recuerda que con angular también podrías agregar el (click) en el div que construye el circulo :D
    – JuanFCVal
    Commented el 6 oct. 2022 a las 23:12
  • ahora juntando un poquito de cada uno lo pude hacer, pude hacer que me quedaran los dos botenes exactamente en el medio cuando hago el hover con position relative y absolute, mi nueva duda es, hay una forma que cuando yo hago el hover y se vean los dos botones la palabra que yo tenga de fondo se difumine?
    – user300807
    Commented el 6 oct. 2022 a las 23:47
  • Si, al texto que vas a agregar también debes agregarle una clase de css y asi como la clase cursor que esta dentro del container:hover debes agregarla y agregar las propiedades que harán al texto difuminado. Ese comportamiento se vera reflejado cuando haya un hover.
    – JuanFCVal
    Commented el 8 oct. 2022 a las 0:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.