CSS :hover function

Dear all,

I’ve just finished making the general outline of my first portfolio website, however I seem to have a nagging problem.

The website is here: http://pandaskotest.webuda.com/

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.

It seems the website is down for a few minutes. I think its because the host is doing its standard checks. I’ll post again when its up for good.

yay its up! Sorry for all the inconvenience.

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.

:slight_smile:

Its up now. :blush:

Hi,

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:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<title>Pandasko: A Web Design Company</title>
<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
}
img {
    border-style: none;
}
#body {
    margin:0px;
    padding:0px;
}
#wrapper {
    width: 800px;
    margin: 0 auto;
    padding: 0px;
    background-color: white;
}
#header {
    background-color: black;
    height: 22px;
}
#header-bottom {
    background-color: white;
    border-bottom: 1px solid black;
    padding-bottom: 5px;
}
#header-bottom ul {
    margin: 0;
    text-align:right;
    text-decoration: none;
}
#header-bottom li {
    font-size: 0.75em;
    display: inline;
    padding: 10px;
    font-family: sans-serif;
}
#header-bottom a:link, #header-bottom a:visited {
    text-decoration: none;
    background-color: white;
    color: black;
}
#header-bottom a:hover {
    color:white;
    background-color:black;
}
#main {
    background-color:white;
}
#banner {
    background: url("http://pandaskotest.webuda.com/images/banner.jpg") no-repeat;
    background-repeat: no-repeat;
    background-color: white;
    color: white;
    margin: 10&#37; 3% 3% 4%;
    height:300px;
    width: 730px;
    font-family: serif;
}
/*#banner .h1{
    font-size: 300%;
}*/

.services {
    font-family: sans-serif;
    font-size: 0.8em;
    padding-left: 70px;
    padding-bottom: 25px;
}
#menu-outer {
    height: 100px;
}
.table {
    display: table;   /* Allow the centering to work */
    text-align: center;
}
ul#horizontal-list {
    min-width: 800px;
    list-style: none;
    padding-top: 20px;
    padding-left: 2px;
}
ul#horizontal-list li {
    display: inline;
    padding: 28px;
}
#list-bottom {
    background-color: white;
    border-bottom: 1px solid black
}
#list-bottom ul {
    margin: 0;
    text-align: centre;
    text-decoration: none;
    padding-bottom: 40px;
}
#list-bottom li {
    font-size: 0.70em;
    display: inline;
    padding:45px;
    font-family: sans-serif;
}
#list-bottom a:link, #list-bottom a:visited {
    text-decoration: none;
    background-color: white;
    color: black;
}
#list-bottom a:hover {
    color:white;
    background-color:black;
}
#footer {
    padding-top: 20px;
    font-size: 0.70em;
    font-family: sans-serif;
    text-align: center;
}
ul#horizontal-list li, ul#horizontal-list li a.a, ul#horizontal-list li a.b, ul#horizontal-list li a.c, ul#horizontal-list li a.d {
    display:-moz-inline-box;
    display:inline-block;
    width:100px;
    height:65px;
    white-space:nowrap;
}
* html ul#horizontal-list li {display:inline}
*+html ul#horizontal-list li {display:inline}
ul#horizontal-list li a:hover img {visibility:hidden;}
ul#horizontal-list li a.a:hover {background:red}
ul#horizontal-list li a.b:hover {background:blue}
ul#horizontal-list li a.c:hover {background:green}
ul#horizontal-list li a.d:hover {background:orange}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header"> <a href=""><img src="http://pandaskotest.webuda.com/images/pandasko.png" alt="pandasko" height="20" width="115" /></a>
        <div id="header-bottom">
            <ul>
                <li><a href="">home</a></li>
                <li><a href="">porfolio</a></li>
                <li><a href="">resume</a></li>
                <li><a href="">links</a></li>
                <li><a href="">contact</a></li>
            </ul>
        </div>
        <!--header bottom-->
    </div>
    <!--header-->
    <div id="main">
        <!--main content start-->
        <div id="banner">
            <!--<h1> We are <br /><span id="pandasko">pandasko:<br /> </span> a web design company</h1>-->
        </div>
        <!--end of banner-->
        <p class="services"> We pride ourselves on providing quality services for competitive prices. We also do the following:</p>
        <div class= "table">
            <ul id="horizontal-list">
                <li><a class="a" href="#"><img src="http://pandaskotest.webuda.com/images/piece.gif" alt="web-development" /></a><br />
                    <a href="">web development</a></li>
                <li><a class="b" href=""><img src="http://pandaskotest.webuda.com/images/piece2.gif" alt="graphic design  " /></a><br />
                    <a href="">graphic design</a></li>
                <li><a class="c" href=""><img src="http://pandaskotest.webuda.com/images/piece.gif" alt="illustration" /></a><br />
                    <a href="">illustration</a></li>
                <li><a class="d" href=""><img src="http://pandaskotest.webuda.com/images/piece2.gif" alt="photography" /></a><br />
                    <a href="">photography</a></li>
            </ul>
            <!--end of table-->
        </div>
        <!--menu-outer-->
    </div>
    <!--end of main-->
    <p>&nbsp</p>
    <div id="footer">
        <p> Copyright 2010. All Rights Reserved</p>
    </div>
    <!--end of footer-->
</div>
<!--end of wrapper-->
</body>
</html>


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.

Thankyou buddy. I will try that when I finish work and see how that goes. :slight_smile: