hide and show image background for a row menu

[theogary]

I have a css menu in asp.net. I want define a css for the menu containing a:link's. On hover I want the row backgound image to be visible. When not hover I want the row background to not be visible.

.menuPopupItem a:link ,.menuPopupItem a:visited
{color: Gray;
font-family: Verdana,helvetica,sans-serif;
font-weight: bold;
background-image: none;
}

.menuPopupItem a:hover:tr
{color: #F26722;
background-image: url(images/a.gif);
font-family: Verdana,helvetica,sans-serif;
font-weight: bold;
}

 

[BillyRayPreachersSon]

So what actual problem do you have, apart from weird syntax with the ":tr" code?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ChrisHunt]

You don't need to re-specify the font face or weight, and the [tt]:tr[/tt] is meaningless stuff that just makes your rule invalid. Try this:

.menuPopupItem a:link ,.menuPopupItem a:visited 
   {color:  Gray;
    font-family: Verdana,helvetica,sans-serif;
    font-weight: bold;
    background-image: none;
   }
            
.menuPopupItem a:hover
   {color: #F26722;
    background-image: url(images/a.gif);
   }

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[theogary]

if you donot address the <TR> background-image: url(images/a.gif); You will not see the image fill the entire row. the image will fill only the words of the td.

You must say .menuPopupItem tr {
background-image: url(images/a.gif);
}

I want to change image of the row on hover and when not hovering....using CSS

 

[Vragabond]

Your hover selector makes no sense. Furthermore, I am not sure how your html structure looks like. I will assume you have a container with a class "menuPopupItem" and inside that container there are links. Are these links in a table? Are tables inside links (this is non-standard code, but I suppose you could attempt something like that)? Without the structure (and based on the css you gave us) it is impossible to say how to fix it.

If you want to change the style of an element when the mouse hovers over it, you simply add :hover pseudo class to that element. IE6 however does not support the :hover on anything but anchors.

.menuPopupItem tr:hover {
background-image: url(images/a.gif);
}

I also suggest you check how browsers display the tr. If I am not mistaken, tr is an invisible element and you need to manipulate the visual elements of td to show what is done.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]