If you take a look there is an inline list below the banner. These items are the 4 puzzle pieces. What I want is an on hover function which will change the puzzle to another color (another img), however I seem to have some problems with the construction of the css.
I tried giving each list item a seperate class, and then giving each class a different background image in css (instead of a html-markup img) and then using the a:hover function to change it to the intended background image. But for some reason it doesn’t work.
have any tips?
Also, why doesn’t the browser immediately recognize the puzzle pieces as links? It sometimes takes a bit of movement of the mouse for the hand to appear.
You see this page, because the system administrator of 000webhost.com is currently checking this website for malicious content. This redirect will be removed once we will finish manually checking all files on this account. As far we check over 100 websites, it can take about 2-4 hours to complete. If you are the owner of this website, you will get email confirmation once it’s done. If you are a visitor - please come back later.
www.000webhost.com is a free web hosting provider and all free hosting providers suffer from abusers. Around 5% of users signup here just to start hacking or phishing website or make other damage. So, in order to survive, we must monitor what our users are hosting.
We are sorry for any inconveniences, but checking all content manually, it is the only way to provide you with the most secure and reliable service. If you have found any illegal website on our network, you can report it here.
Usually you would put both images in the background and combine then into one image and then just swap the background position to get an instant rollover
It also gets a bit complicated using inline elements like you have and I would have floated the elements with width and height inside an auto centred fixed width container to make life easier. That means the list and anchors can have width and height because they are floated.
Using your version it gets a little complicated and you would need something like this:
Just swap the background colours for images as required.
However for smoother rollovers look at combining both states of the image into a single image (assuming they are the same size) and then just swap the background position on hover.