Applicando gli angoli arrotondati dell'immagine a < li >

Question

Stavo usando i plugin jQuery per creare un angolo arrotondato per il mio < li > , ma non funzionava su molti browser e non supportava il mouse.

Mi chiedo quale sia il modo migliore di usare due immagini (angolo sinistro e angolo destro) come lato sinistro e destro usando < li > .

Answer 1

Potresti mettere Divs all'interno dei tuoi li in questo modo:

<li>
  <div class="lefcorner"></div>
  <div class='liContent'>Foo</div>
  <div class='rightcorner'></div>
</li>

In questo modo entrambi manterrai la tua semantica e avrai anche il supporto cross-browser dei DIV di stile.

Answer 2

Il costrutto che ho visto più utilizzato per questo è un intervallo all'interno di un collegamento.

quindi qualcosa del tipo:

<li><a><span>Your text here</span></a></li>    

puoi quindi scegliere come target lo span e il link usando lo stato hover del link:

a:hover{some rules here}  
a:hover span{some more rules here} 

che lo mantiene un po 'semantico e non aggiunge molta spazzatura alla pagina.