?
Solved

How to use CSS to switch custom images in Unordered List.

Posted on 2011-02-12
7
Medium Priority
?
285 Views
Last Modified: 2012-08-13
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
0
Comment
Question by:Siv
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 16

Accepted Solution

by:
SSupreme earned 2000 total points
ID: 34880379
How about this:
nav li:hover { background-image: url("images/ButtonSelected.jpg");}

Open in new window

Try it.
0
 

Author Comment

by:Siv
ID: 34880388
@SSupreme,

Yo da man!

Can you explain why that works?

Many thanks!
0
 

Author Closing Comment

by:Siv
ID: 34880390
Answer direct and to the point.
Worked a treat.
thanks a lot.
Siv
0
Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

 
LVL 16

Expert Comment

by:SSupreme
ID: 34880411
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>.

0
 
LVL 16

Expert Comment

by:SSupreme
ID: 34880415
You have this style for <li>:
nav li { background-image: url("images/ButtonUnselected.jpg");
on hover will be this style for <li>:
nav li:hover { background-image: url("images/ButtonSelected.jpg");
0
 

Author Comment

by:Siv
ID: 34880417
@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
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 34880419
You are welcome.
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

741 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question