When I hover an item in a list and the list text contains a linebreak, the hover effect seems to be inconsis开发者_开发知识库tent.
<ul id="nav1" class="greenbullet">
<li>
<a href="" class="tsize">Surdite : en Europe, 40 <br />millions de personnes sont concernees</a>
</li>
<li>
<a href="" class="tsize">GuideCaro, une entreprise pionniere, partenaire de Garnier</a>
</li>
<li>
<a href="" class="tsize">Garnier renforce son accessibilite en lancant le service Sourdline </a>
</li>
</ul>
The css
#nav1 { list-style:url(../../img/02-tri-SDB-light/images/greenbullet.png) }
#nav1 li a { text-decoration:none;color:#019b99 }
#nav1 li { margin-left:40px }
#nav1 li:hover, #nav1 li:hover a { list-style:url(../../img/02- tri-SDB-light/images/puce2.png); color:#FFF;background-color:#019b99; }
How do I sort this out?
I've created a fiddle and can't see the problem.
http://jsfiddle.net/jasongennaro/V654e/
However, we can't see your list-style
because they are images. So the problem may be there, specifically with the :hover
style. There appears to be a break in the url
after the 02
?
#nav1 li:hover, #nav1 li:hover a { list-style:url(../../img/02- tri-SDB-light/images/puce2.png); color:#FFF;background-color:#019b99; }
You should use #nav1 li a:hover
, or simpler #nav1 a:hover
. Otherwise, the hover won't work on IE6.
精彩评论