Применение закругленных углов изображения к <li>

Question

Я использовал плагины jQuery для создания закругленного угла для моего <li>, но он не работал во многих браузерах и не поддерживал наведение мыши.

Мне интересно, как лучше всего использовать два изображения (левый и правый угол) в качестве левой и правой стороны с помощью <li>.

Answer 1

Конструкция, которую я видел, чаще всего использовалась для этого - это промежуток внутри ссылки.

так что-то вроде:

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

затем вы можете настроить таргетинг на диапазон и ссылку, используя состояние наведения ссылки:

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

, что сохраняет его семантику и не добавляет много мусора на страницу.

Answer 2

Вы можете поместить Div внутри своего li так:

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

Таким образом вы не только сохраните свою семантику, но и получите кросс-браузерную поддержку стилей DIV.