s_ff_da_b_ff Posted March 5, 2009 Share Posted March 5, 2009 Ok so I have a side bar with a bunch of divs that are links. When the mouse hovers over it I want the entire div box to change color but for some reason on the letters are being affected by the hover call. check www.thesidetracked.com -- look at the side bar to the right and the list of links under Categories, Recent Comments, Archives, ect. When you hover over it only the text is being effected but i want the entire div box effected. Code: #sidebar { color:#999999; float:right; font-size:11px; margin-top:10px; padding-bottom:25px; text-align:left; width:300px; } a:hover { color:#ccc; } #sidebar a:hover{ color:#FFF; background:#ececec; } #sidebar ul li a:hover{ color:#FFF; background:#ececec; } #sidebar a { border:medium none; font-weight:bold; } #sidebar ul { list-style-image:none; list-style-type:none; margin:0px; } #sidebar ul li { list-style-type:none; padding:5px 0px; list-style-image:none; } #sidebar ul li ul { list-style:none; margin:0px; } #sidebar ul li ul li { background:#ececec; color: #000; margin:0px; border-bottom:1px solid white; padding:2px 0px 2px 14px; } any ideas? Quote Link to comment Share on other sites More sharing options...
haku Posted March 5, 2009 Share Posted March 5, 2009 You will have to set the hover status on the containing element then, not the <a> tag. This unfortunately won't work on IE6 though, which only supports :hover on <a> elements. If you want it to happen in IE6 as well, you will have to use a javascript solution. Quote Link to comment Share on other sites More sharing options...
s_ff_da_b_ff Posted March 5, 2009 Author Share Posted March 5, 2009 OK I have never done that before. Can you give me an example of what you mean using CSS code. Quote Link to comment Share on other sites More sharing options...
haku Posted March 5, 2009 Share Posted March 5, 2009 HTML: <ul> <li><a href="#">text</a></li> </ul> CSS: li { background-color: red; } li:hover { background-color: blue; } With this code, when you hover over <li> list element, the background color will change. If you want the text color of the <a> element to change as well, then you will need to make your CSS look like this: li { background-color: red; } li:hover { background-color: blue; } li a { color: blue; } li:hover a { color: red; } The key here is 'li:hover a'. This will affect <a> tags that are inside <li> tags that are being hovered over. Quote Link to comment Share on other sites More sharing options...
s_ff_da_b_ff Posted March 5, 2009 Author Share Posted March 5, 2009 thx haku appreciate it Quote Link to comment Share on other sites More sharing options...
sKunKbad Posted March 6, 2009 Share Posted March 6, 2009 You will have to set the hover status on the containing element then, not the <a> tag. This unfortunately won't work on IE6 though, which only supports :hover on <a> elements. If you want it to happen in IE6 as well, you will have to use a javascript solution. I have a menu like this on my website, and it requires no JS to work on IE6. Quote Link to comment Share on other sites More sharing options...
haku Posted March 6, 2009 Share Posted March 6, 2009 Let's see a link. I'm interested in this magic code. Quote Link to comment Share on other sites More sharing options...
sKunKbad Posted March 6, 2009 Share Posted March 6, 2009 It's right there in my sig. www.brianswebdesign.com ...and yes, you can call me magic Quote Link to comment Share on other sites More sharing options...
haku Posted March 8, 2009 Share Posted March 8, 2009 I see what you are saying, and ya that works. But your hovers are all on <a> elements, which is supported by IE6, but hover isn't supported by other elements, which is what I said in the first place. But I was wrong that it needs a javascript solution for IE6 - you have a good alternate method there. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted March 11, 2009 Share Posted March 11, 2009 Add display: block; to your li a:hover. Also, declare an "li a" select, as well, so the block is consistent looking when transitioned on the hover. And remember that "a" should always goes before a:hover for the same select: Your layout is breaking in IE 6 - I would recommend adding an IE-only.css file and calling it via a conditional comment (You would then only need to tweak widths, margins, paddings etc to make IE behave). #sidebar ul li a { display: block; color:#CCC; background:#FFF; } #sidebar ul li a:hover{ display: block; color:#FFF; background:#ececec; } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.