Geoffrey D. Hoffman President, Global Interactive Minds, LLC 398 S. Mill Ave. #303 Tempe, AZ 85281 Office: 480-921-3171 Fax: 480-921-3139 Mobile: 480-231-8323
G | M | M Global Media Minds --- On Sun, 3/29/09, Geoffrey Hoffman <geo...@globalmediaminds.com> wrote: > From: Geoffrey Hoffman <geo...@globalmediaminds.com> > Subject: [css-d] Is this possible with CSS? > To: css-d@lists.css-discuss.org > Date: Sunday, March 29, 2009, 3:20 AM > I'm trying to replicate the effect done (with tables, > images and Javascript) in the left column of this page... > > http://holdenluntz.com/artist.htm > > ... with CSS only. > > Specifically, I want the <li> bullet to turn a color > when I hover on the <a> inside it. (Ignore the images > that show up on hover in the right-hand column). I've > recoded it as a simple link list, e.g.... > > <ul> > <li><a href="#">Link > One</a></li> > <li><a href="#">Link > Two</a></li> > <li><a href="#">Link > Three</a></li> > </ul> > > I know that it's possible to use a re-positioned > background image to achieve this effect, but I was wondering > if it is possible to do with CSS only. I've tried > several of the obvious things without any luck. > > Any suggestions? > > TIA, > > Geoff > > > -----Original Message----- > From: css-d-boun...@lists.css-discuss.org on behalf of Bobby Jack > Sent: Sat 3/28/2009 7:35 PM > To: css-d@lists.css-discuss.org > Subject: Re: [css-d] Is this possible with CSS? > > > Hi Geoffrey, > > Have you tried something like the following? > > ul { list-style-type: none; color: #fff; } > li:hover { list-style-type: disc; color: #f7c30e; } > li:hover a { color: #f7c30e; } > a { text-decoration: none; color: #fff } > > (The "li:hover a" and "a { color: ... }" seem to be required by IE7 - gah. > Other browsers handle inherit properly) > > Probably won't work in IE6, although I haven't tested it; > one version of IE doesn't like :hover on anything but a, but I cannot > remember which > > - Bobby Yeah, I can get the colors I want to change on hover on the text... that's just a simple a{ } and a:hover{ } I just can't make the bullet change on hover. I think it's due to how selectors work. In short, the hover is happening on <a> but I'm trying to change the color of <li> (a's parent) Even when I try to make an li:hover rule, a different color it doesn't seem to work. It doesn't matter if it has an <a> inside it or not. I'm testing on FF 3.0.7, Win XP ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] 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/
