Dreamweaver - CSS a:hover image background attribute

Author

CSS a:hover image background attribute

Argon002

2005-01-28, 7:22 pm

I am trying to get an image to display as a background when the mouse rollsover
the linked text. I set up the image background in a CSS that is linked to the
text hyperlink. As you can see (URL below), only the very top edge of the image
can be seen when the mouse rolls over the text because the background area
behind the text is not big enough for the graphic. How do you increase the size
of the text background so that the image will show up? The CSS code is attached
for the hyperlinked text.

Please see: http://www.elshaddaicf.com/healthwellnesslibrary.htm
Attach Code

.healthwellnessmenu a:link {
color: #FFFF2D;
}
.healthwellnessmenu a:visited {
color: #40C9FD;
}
.healthwellnessmenu a:hover {
color: #FFFF2D;
background-image: url(../images/healthwellnessmenu.png);
}
.healthwellnessmenu a:active {
color: #FFFF2D;
}

Murray *TMM*

2005-01-28, 7:22 pm

Padding. Height. Line-height. Try those.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"Argon002" <webforumsuser@macromedia.com> wrote in message
news:ct8g9o$2pf$1@forums.macromedia.com...
>I am trying to get an image to display as a background when the mouse
>rollsover
> the linked text. I set up the image background in a CSS that is linked to
> the
> text hyperlink. As you can see (URL below), only the very top edge of the
> image
> can be seen when the mouse rolls over the text because the background area
> behind the text is not big enough for the graphic. How do you increase the
> size
> of the text background so that the image will show up? The CSS code is
> attached
> for the hyperlinked text.
>
> Please see: http://www.elshaddaicf.com/healthwellnesslibrary.htm
> Attach Code
>
> .healthwellnessmenu a:link {
> color: #FFFF2D;
> }
> .healthwellnessmenu a:visited {
> color: #40C9FD;
> }
> .healthwellnessmenu a:hover {
> color: #FFFF2D;
> background-image: url(../images/healthwellnessmenu.png);
> }
> .healthwellnessmenu a:active {
> color: #FFFF2D;
> }
>
>

Osgood

2005-01-28, 7:22 pm

Change your a:link style to as below.

..healthwellnessmenu a:link {
color: #FFFF2D;
display: block;
line-height: 60px;
}

Argon002 wrote:

> I am trying to get an image to display as a background when the mouse rollsover
> the linked text. I set up the image background in a CSS that is linked to the
> text hyperlink. As you can see (URL below), only the very top edge of the image
> can be seen when the mouse rolls over the text because the background area
> behind the text is not big enough for the graphic. How do you increase the size
> of the text background so that the image will show up? The CSS code is attached
> for the hyperlinked text.
>
> Please see: http://www.elshaddaicf.com/healthwellnesslibrary.htm
> Attach Code
>
> .healthwellnessmenu a:link {
> color: #FFFF2D;
> }
> .healthwellnessmenu a:visited {
> color: #40C9FD;
> }
> .healthwellnessmenu a:hover {
> color: #FFFF2D;
> background-image: url(../images/healthwellnessmenu.png);
> }
> .healthwellnessmenu a:active {
> color: #FFFF2D;
> }
>
>

Al Sparber- PVII

2005-01-28, 7:22 pm

This tutorial will help you uderstand:
http://www.projectseven.com/tutoria...links/index.htm

--
Al Sparber - PVII
http://www.projectseven.com
DW Extensions - Menu Systems - Tutorials - CSS FastPacks
---------------------------------------------------------
Webdev Newsgroup: news://forums.projectseven.com/pviiwebdev/
CSS Newsgroup: news://forums.projectseven.com/css/
RSS/XML Feeds: http://www.projectseven.com/xml/

"Argon002" <webforumsuser@macromedia.com> wrote in message
news:ct8g9o$2pf$1@forums.macromedia.com...
>I am trying to get an image to display as a background when the mouse
>rollsover
> the linked text. I set up the image background in a CSS that is linked
> to the
> text hyperlink. As you can see (URL below), only the very top edge of
> the image
> can be seen when the mouse rolls over the text because the background
> area
> behind the text is not big enough for the graphic. How do you increase
> the size
> of the text background so that the image will show up? The CSS code is
> attached
> for the hyperlinked text.
>
> Please see: http://www.elshaddaicf.com/healthwellnesslibrary.htm
> Attach Code
>
> .healthwellnessmenu a:link {
> color: #FFFF2D;
> }
> .healthwellnessmenu a:visited {
> color: #40C9FD;
> }
> .healthwellnessmenu a:hover {
> color: #FFFF2D;
> background-image: url(../images/healthwellnessmenu.png);
> }
> .healthwellnessmenu a:active {
> color: #FFFF2D;
> }
>
>