How to use CSS to switch custom images in Unordered List.
Hi,
I have been playing round with an unordered list that I have used CSS to alter the bullet image from the usual black spot to a ball graphic.
What I want to do is make it that when you hover over each item in the list which is being used as a "nav" block for my page, the image toggles to a version that looks highlighted (ie slightly brighter colour) to enhance the selection. In the past I have used JavaScript to switch the images but I am sure you ought to be able to do it with CSS.
I have used the background-image rather than list-style-iamge as another issue I was getting was that the text of the list was not centred vertically on the bullet symbol and it didn't work either as far as the image toggling goes.
I have played around with the background-position attribute and found that when the mouse hovers over the link the background image appears but only in the section of the li element where the text is, not over the existing sphere image. I then tried making its value negative and as you get nearer to the left edge of the screen it just disappears behind the original image that was layed out in the CSS for the li element.
If you visit this page you will see how it is with a background-position set to -20 so the image is appearing but when I set it to -40 it does not replace the original image.
Lnk to my test page
The Style is in the sheet so if you view the source you should see where I have got to. Any help with this using CSS would be greatfully accepted.
Siv
I have been playing round with an unordered list that I have used CSS to alter the bullet image from the usual black spot to a ball graphic.
What I want to do is make it that when you hover over each item in the list which is being used as a "nav" block for my page, the image toggles to a version that looks highlighted (ie slightly brighter colour) to enhance the selection. In the past I have used JavaScript to switch the images but I am sure you ought to be able to do it with CSS.
I have used the background-image rather than list-style-iamge as another issue I was getting was that the text of the list was not centred vertically on the bullet symbol and it didn't work either as far as the image toggling goes.
I have played around with the background-position attribute and found that when the mouse hovers over the link the background image appears but only in the section of the li element where the text is, not over the existing sphere image. I then tried making its value negative and as you get nearer to the left edge of the screen it just disappears behind the original image that was layed out in the CSS for the li element.
If you visit this page you will see how it is with a background-position set to -20 so the image is appearing but when I set it to -40 it does not replace the original image.
Lnk to my test page
The Style is in the sheet so if you view the source you should see where I have got to. Any help with this using CSS would be greatfully accepted.
Siv
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Answer direct and to the point.
Worked a treat.
thanks a lot.
Siv
Worked a treat.
thanks a lot.
Siv
There are two elements which could be affected by styling, they are <li> and <a>.
You applied "unselected" background for <li> tag and "selected" for <a> tag, so basically you added extra background for <a> which appear on hover. If you want to change <li>'s "unselected" background, you need to apply style for <li> not for <a>.
You applied "unselected" background for <li> tag and "selected" for <a> tag, so basically you added extra background for <a> which appear on hover. If you want to change <li>'s "unselected" background, you need to apply style for <li> not for <a>.
You have this style for <li>:
nav li { background-image: url("images/ButtonUnselect
on hover will be this style for <li>:
nav li:hover { background-image: url("images/ButtonSelected
nav li { background-image: url("images/ButtonUnselect
on hover will be this style for <li>:
nav li:hover { background-image: url("images/ButtonSelected
ASKER
@SSupreme
Blimey, I can't believe I didn't think of that. I think this is a case of two pairs of eyes are better than one. When you know the answer it's so simple.
Thanks again much appreciated.
Siv
Blimey, I can't believe I didn't think of that. I think this is a case of two pairs of eyes are better than one. When you know the answer it's so simple.
Thanks again much appreciated.
Siv
You are welcome.
ASKER
Yo da man!
Can you explain why that works?
Many thanks!