larghezza intera: passa il mouse sullo sfondo per gli elenchi annidati?

Question

L'html tagliato sotto rende un elenco annidato di elementi. Al passaggio del mouse (sopra il mouse) il colore dello sfondo degli elementi cambia. Ma uno spazio rimane incolore a sinistra (a causa della rientranza).

Come si ottiene lo stesso colore?

Ho provato ad aggiungere absolute elementi posizionati agli elementi li con left:0. Ma quelli parzialmente nascondere il contenuto dei li elementi:/

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin:0 
 
} 
 
li { 
 
    margin:0; 
 
    padding: 0; 
 
    padding-left: 20px; 
 
} 
 
li > div:hover { 
 
    background-color: #eee 
 
}

<div style="position:relative"> 
 
    <ul> 
 
    <li><div>Root</div> 
 
     <ul> 
 
     <li><div>A</div> 
 
      <ul> 
 
      <li><div>AA</div></li> 
 
      <li><div>AB</div></li> 
 
      </ul> 
 
     </li> 
 
     <li><div>B</div> 
 
      <ul> 
 
      <li><div>BA</div></li> 
 
      <li><div>BB</div></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

Aggiungi l'imbottitura ai div invece del <li>:

ul { list-style: none; padding: 0; margin:0 } 
li { margin:0; padding: 0;} 
li > div:hover { background-color: #eee} 
li div{padding-left:20px} 
li li div{padding-left:40px} 
li li li div{padding-left:60px} 

Demo: http://jsfiddle.net/Madmartigan/MKK8v/

Impostandolo sull'elemento della lista, finisci per riempire tutto anche gli elementi dell'elenco secondario. Se puoi modificare il tuo markup, penso che ci siano modi migliori però.

Answer 2

Penso che il modo più semplice qui sarebbe di mettere lo sfondo padding e hover sugli elementi div. Mette un brutto limite ai livelli di nidificazione degli alberi, dato che devi scrivere tutte le regole CSS dei tuoi livelli ma ... probabilmente c'è comunque un limite orizzontale per la larghezza del tuo contenuto.

ul, li 
{ 
    margin: 0; 
    padding: 0; 
} 

ul div:hover { 
    background: #eee; 
} 

ul ul div { padding-left: 20px; } 
ul ul ul div { padding-left: 40px; } 
ul ul ul ul div { padding-left: 60px; } 
/* et cetera*/ 

Answer 3

Può essere raggiunto utilizzando jQuery.

ho usato un div invisibile che si posiziona sul li essere aleggiava e riempie tutta la larghezza

$(document).ready(function() { 
 

 
    $('li > div').hover(function(event) { 
 

 
     $("div#liSelect").show(); 
 
     $("div#liSelect").css('height', $(this).height() + "px"); 
 
     $("div#liSelect").css('top', $(this).position().top + "px"); 
 
     event.stopPropagation(); 
 
    }, 
 
    function() { 
 
     $('div#liSelect').hide(); 
 
    }); 
 
})

body { 
 
    margin: 0px; 
 
} 
 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
    padding-left: 20px; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<div style="position: relative"> 
 
    <div id='liSelect' style='display:none;width:100%;height:100%;position:absolute;left:0px;opacity:0.3;background-color:#555;pointer-events:none;'></div> 
 
    <ul> 
 
    <li> 
 
     <div>Root</div> 
 
     <ul> 
 
     <li> 
 
      <div>A</div> 
 
      <ul> 
 
      <li> 
 
       <div>AA</div> 
 
      </li> 
 
      <li> 
 
       <div>AB</div> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <div>B</div> 
 
      <ul> 
 
      <li> 
 
       <div>BA</div> 
 
      </li> 
 
      <li> 
 
       <div>BB</div> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 4

sarebbe più bello con i CSS, ma utilizzando jQuery si potrebbe:

Aggiungere il riempimento allo div a seconda del livello.

$('li').each((i, el) => { 
    $(el).children('div').css('padding-left', 30 * $(el).parents('ul').length) 
}); 

https://jsfiddle.net/9ydr6b6z/

Answer 5

Ci

problema si verifica perché è stato applicato padding-left: 20px;, sì che al passaggio del mouse non sarà applicata a quella parte che contiene 20px padding da sinistra.

Come il mio suggerimento, Per una corretta struttura html & css, è necessario assegnare classe o id nome al <li> & <div> elemento, a causa di che si può facilmente rilevare problema & ottenere struttura potente.

Answer 6

È possibile rimuovere padding-left da elemento li e utilizzare jQuery per aggiungere padding-left a div in questo modo:

$("li>div").each(function(i, div){ 
       var $li = $(div).parent(); 
       var parentCount= $li.parents("li").length; 
       var padding = parentCount*20; 
       $(div).css("paddingLeft", padding + "px"); 
      }); 

Demo

Answer 7

si potrebbe usare questo CSS per rendere il vostro div riempire i trattini in modo tale che lo spazio non venga lasciato incolore sull'effetto hover, quindi imposta l'overflow su nascosto sul wrapper genitore.

li div{ 
    padding-left: 100%; 
    margin-left: -100%; 
} 

questo modo è generico in modo che si può avere come molti sotto <ul> e <li> tag di cui hai bisogno. Ecco un collegamento a un JSFiddle con un esempio funzionante.

Answer 8

Utilizzare questo codice CSS al posto del codice.

ul { 
    list-style: none; 
    padding: 0; 
    margin:0 
} 

li > div:hover { 
    background-color: #eee 
} 

li div { 
    padding-left: 20px; 
} 

li li div { 
    padding-left: 40px; 
} 

li li li div { 
    padding-left: 60px; 
} 

Answer 9

Il tentativo di trovare una soluzione generica ho provato con CSS Counters. Sfortunatamente sembra che i contatori possano essere usati solo nelle proprietà content.

Forse qualcuno riesce a capire come utilizzare il contatore per ottenere il corrispondente padding-left ...

ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    counter-increment: level; 
 
} 
 

 
ul:after { 
 
    content: ""; 
 
    counter-increment: level -1; 
 
} 
 

 
li div:hover { 
 
    background-color: #ddd; 
 
} 
 

 
li div { 
 
    padding-left: calc(20px * counter(level)); 
 
} 
 

 
li div:before { /* Just for debugging purposes */ 
 
    color: #bbb; 
 
    content: counter(level)" "; 
 
}

<div style="position:relative"> 
 
    <ul> 
 
    <li><div>Root</div> 
 
     <ul> 
 
     <li><div>A</div> 
 
      <ul> 
 
      <li><div>AA</div></li> 
 
      <li><div>AB</div></li> 
 
      </ul> 
 
     </li> 
 
     <li><div>B</div> 
 
      <ul> 
 
      <li><div>BA</div></li> 
 
      <li><div>BB</div></li> 
 
      <li><div>BC</div> 
 
       <ul> 
 
       <li><div>BCA</div></li> 
 
       <li><div>BCB</div></li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><div>C</div></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>