On Fri, Mar 14, 2014 at 5:17 PM, John <[email protected]> wrote: > I hope the bits below are enough, else the whole beast can be viewed at: > http://coffeeonmars.com/W200/test/DTake_Index.html > > Right now, the li a:hover state appears visually before the a: hover state, > depending on how fast you mouse over it, which could lead the User to > believe that clicking on the color area around the actual link is enough to > fire off that link...is there a way I can get the a:hover and the li a:hover > to happen at the same time? I suspect it's to do with increasing a:hover's > clickable area to co-incide with li a:hover's > > Thank you, > > John > > a{ > color:rgb(0,0,0); > text-decoration:none; > border-bottom:1px dotted rgb(0,0,0); > } > a:hover{ > color:rgb(255,0,0); > } > nav li{ > display:inline; > line-height:1.65em; > margin:0 9% 0 0; > padding:.12em 1em .4em 1em; > border-radius:3px; > background-color:rgb(0,0,0); > } > nav ul li a{ > color:rgb(255,255,255); > border-bottom:0; > } > nav ul li a:hover{ > color:rgb(255,0,0); > border-bottom:0; > } > nav ul li:hover{ > background-color:rgb(200,200,200);
You could have the <a> be display: block; and add padding//bg color etc. to achieve the look you are after. Remove the hover from the <li>. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
