Navigation Background Change on Hover

So, here's my problem... I made a horizontal Navigation with a link over it, and I want the background of my navigation to change when I hover over the Link... But only the background which is used by the Text gets changed... But I want to have the whole background changed in the height... And in the width the space which is used by the Text...

So here is my CSS code:

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: #000000;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
 }
#header {
 color: #333;
 background: #E2FF96;
 height: 160px;
 width: 922px;
 margin: 30px 0px 0px 0px;
 }

#navigation {
 background:url(NavBG.png);
 height:36px;
 width:922px;
}

#navigation a:hover {
 background:url(NavBGHover.png);
 height:36px;
}


#faux {
 background: url(left_main_right_coloumn.gif);
 margin bottom: 10px;
 overflow: auto;
 width: 100%
}

#leftcontainer {
 color: #333;
 height: 300px;
 width: 195px;
 margin: 10px 10px 10px 10px;
 padding: 0px;
 float: left;
 display: inline;
 }


#maincontainer {
 float: left;
 color: #333;
 width: 460px;
 margin: 10px 13px;
 padding: 0px;
 positon: relative;
 display: inline;
}

#rightcontainer {
 color: #333;
 height: 300px;
 width: 195px;
 margin: 10px 10px 10px 10px;
 float: right;
 position: relative;
 display: inline;
}

And here my HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test LayOut</title>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<div id="wrapper">
<div id="header">Head IMG</div>
<div id="navigation"><a href="http://www.google.de/" >LINK LINK</a></div>
<div id="faux">
<div id="leftcontainer"></div>
<div id="maincontainer">TextText</div>
<div id="rightcontainer"></div>
</div>
</div>

I am a total beginner in CSS and I wanna learn more, so if you have criticism on my CSS then just say it ;)

CuddlyBunny

Newbie Poster

2 posts since Aug 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

First of all, I wish the hover attribute had never been invented. I hate pages that change when you move the mouse without clicking. They make the page not accessible to the disabled.

Your problem is that the a:hover pseudo attribute attribute works only with the a (anchor) tag. You can not control where it works. It affects all anchor tags on the page.

Try putting a padding style on the a tag, rather than the div wrapper.

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

2 Years Ago

Hmm, okay, I will try that one... Thanks for your help... And I just think it's cool to have a hover... Well, everyone to his taste ;)

CuddlyBunny

Newbie Poster

2 posts since Aug 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

#navigation:hover { background:url(NavBGHover.png); height:36px; }

Every unstyled link has a hover attribute, the default is underline
user browsers have the option to
underline links -always -never -onmouseover
the part where it becomes very annoying is where the designer removes the default actions when styling the page. changing the background image only won't cause an issue with screen readers, (well not with mine, I wont see the image anyway) please don't change other behaviours,or link colors. doing so makes the site ureadable to the visully impaired

almostbob

Posting Sensei

3,149 posts since Jan 2009

Reputation Points: 571

Solved Threads: 376

This article has been dead for over three months

You