Quiero realizar la barra lateral de un editor normal: cuando nos desplazamos sobre un nombre de archivo, toda la línea cambia a un color de fondo más oscuro.
Sin embargo, dado que los nombres de archivo se enumeran en <ul> , el siguiente código solo cambia el color de fondo para <li> , ¿alguien sabe cómo cambiar el color de fondo para toda la línea donde está el cursor?
.sidebar { width: 102px; background-color: #f3f3f3 } li:hover { background-color: #cccedb } <div class="sidebar"> <ul> <li>a</li> <li>b</li> <li>c</li> </ul> </div>En realidad se cambia toda la línea. El problema es el relleno predeterminado en el elemento ul , si lo elimina puede ver lo que sucede. Ahora tienes que agregar list-style-position: inside; para mantener las balas dentro si es necesario. También puede agregar padding-left: 20px; al elemento li para ponerse en la misma posición que cuando tenía relleno en ul . Vea el fragmento a continuación, por favor:
.sidebar { width: 102px; background-color: #f3f3f3; } li{ padding-left: 20px; } li:hover { background-color: #cccedb; } ul{ padding: 0; list-style-position: inside; } <div class="sidebar"> <ul> <li>a</li> <li>b</li> <li>c</li> </ul> </div>Probar,
.sidebar ul{ padding: 0; margin: 0; list-style: none; } .sidebar ul li{ padding: 5px; }El problema es con el boletín y el relleno.
agrega esto a ul
list-style-type:none; padding:0px; .sidebar { width: 102px; background-color: #f3f3f3 } ul{ list-style-type:none; padding:0px; } li:hover { background-color: #cccedb } <div class="sidebar"> <ul> <li>a</li> <li>b</li> <li>c</li> </ul> </div>