Jump to content

Hover help


s_ff_da_b_ff

Recommended Posts

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?

 

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;

}

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.