Hover help

[s_ff_da_b_ff]

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?

 

 

 

[haku]

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.

[s_ff_da_b_ff]

OK I have never done that before. Can you give me an example of what you mean using CSS code.

[haku]

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.

[s_ff_da_b_ff]

thx haku appreciate it

[sKunKbad]

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.

[haku]

Let's see a link. I'm interested in this magic code.

[sKunKbad]

It's right there in my sig. www.brianswebdesign.com

...and yes, you can call me magic

[haku]

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.

[dbrimlow]

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;

}