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)
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;
}
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;
}
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!!!