[英]Applying image rounded corners to <li>
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. 我使用jQuery插件为<li>
创建了一个圆角,但是它在许多浏览器上均不起作用,并且不支持鼠标悬停。
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>
. 我想知道使用<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: 您可以像这样将Divs放入li的内部:
<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. 这样一来,您不仅可以保留自己的语义,还可以为样式DIV提供跨浏览器的支持。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.