Intenté eliminar las viñetas en una lista desordenada usando este CSS:

list-style-type:none

Pero, ¿cómo las cambio a imágenes al pasar el mouse?

Así

li simple : - https://prnt.sc/u8bml0

eliminar li douts : - https://prnt.sc/u8bml0

reemplace img como esta : - https://prnt.sc/u8bnzd

Coloca el cursor para mostrarlo así: - https://prnt.sc/u8bnzd

Mi código es así:

<ul style="list-style-type:none;">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

Este es el enlace a la imagen que me gustaría que fueran las viñetas de la lista: https://www.flaticon.com/free-icon/coffee_3054889?term=coffee&page=1&position=2

Esto es lo que me gustaría que estuvieran flotando: https : //www.flaticon.com/free-icon/coffee_2935500? term = coffee & page = 1 & position = 9

Estoy aprendiendo HTML y CSS.

3
KashyapVadi 30 ago. 2020 a las 10:34

2 respuestas

La mejor respuesta
<style>
ul {
  list-style-image: url('sqpurple.gif');
}
ul li:hover {
    list-style-image: url('roung.gif');
}
</style>
<ul style="list-style-type:none;">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>
1
VR_Vadi 5 nov. 2020 a las 11:39

Reemplazarás los douts con la imagen

ul {
  list-style-image: url('sqpurple.gif');
}

Y coloque el cursor para cambiar la imagen de li

ul li:hover {
    list-style-image: url('roung.gif');
}
2
Deep Jani 31 ago. 2020 a las 17:21