I was using jQuery plugins to create a rounded corner for my <li>
, but it was not working on a lot of browsers and didn't support mouse over.
I am wondering what is the best way to use two images (left corner and right corner) as the left and right side with using <li>
.
The construct that I have seen used most for that is a span inside a link.
so something like:
<li><a><span>Your text here</span></a></li>
you can then target the span and the link using the hover state of the link:
a:hover{some rules here}
a:hover span{some more rules here}
that keeps it kinda semantic, and doesn't add to much junk to the page.
You could put Divs inside your li's like so:
<li>
<div class="lefcorner"></div>
<div class='liContent'>Foo</div>
<div class='rightcorner'></div>
</li>
That way you will both keep your semantics and will also have the cross-browser support of styling DIVs.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.