Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

page hovers WordPress

  • SOLVED

Hi,

I wanted to have my page titles hover when I mouse over them on my homepage. I have added this code below to my stylesheet, but it doesn't seem to work. What could be my mistake?

.menu ul li a.menu01 { background:url(images/menu01.png) no-repeat 0 0; width:83px;} a.imageLink{
display:block;
background:url(images/menu01.png) top no-repeat;
width:100px;
height:50px;
text-decoration:none;
}
a.imageLink:hover {
background-position:bottom;
}
a.imageLink span {
visibility:hidden;
}

Answers (4)

2011-04-11

Maor Barazany answers:

Please post a link to your page, it will be easier to help...

2011-04-11

Jens Filipsson answers:

Try this. If it doesn't work, please post a link to your page!

a.imageLink{

display:block;

background:url(images/menu01.png) top left no-repeat;

width:100px;

height:50px;

text-decoration:none;

}

a.imageLink:hover {

background-position:bottom left;

}

a.imageLink span {

visibility:hidden;

}

2011-04-11

Michael Fields answers:

CSS background position takes two values. Try something like:


a.imageLink{
display:block;
background:url(images/menu01.png) left top no-repeat;
width:100px;
height:50px;
text-decoration:none;
}

a.imageLink:hover {
background-position:left bottom;
}


ddoodnath comments:

http://www.hawriandmandy.com


Michael Fields comments:

Hi. I looked at your page and I am not seeing the class "imageLink" applied to an html elements ... which element do you want to have the hover effect?


Michael Fields comments:

Here's the code to enable all menu hovers:


.menu ul li a.menu01:hover,
.menu ul li a.menu02:hover,
.menu ul li a.menu03:hover,
.menu ul li a.menu04:hover,
.menu ul li a.menu05:hover,
.menu ul li a.menu06:hover,
.menu ul li a.menu07:hover,
.menu ul li a.menu08:hover {
background-position: left bottom;
}

2011-04-11

S├ębastien | French WordpressDesigner answers:

for each class (menu01,menu02,menu03 etc...)
you have something like that :

.menu ul li a.menu01 {
background:url(images/menu01.png) no-repeat 0 0;
width:83px;}


and for each you must add that

.menu ul li a.menu01:hover {
background:url(images/menu01.png) no-repeat left bottom;
width:83px;}


you add :hover and
"no-repeat 0 0" become "no-repeat left bottom"


ddoodnath comments:

Sebastien..it worked!! Thanks!!!