Geek Answers Handbook

CSS hover + background image

I am creating a special user interface control using HTML / CSS to mimic the buttons of the Windows 7 control panel. So far I have a layout and now I would like to add cosmetics to it.

As you can see here, there is a gradient that appears when you hover over a button.

http://m.cncfps.com/zack/files/this-control.png

Now you can see here that I have a layout. I would like to add an effect :hoverto the whole div element with a background image.

This is currently what I have for CSS, but it does not work. IE8 does not display image, or FireFox

EDIT: It works in Chrome, but not in FireFox or IE.

#cp .cp-item:hover
{
    background:url(images/hoverbg.png) repeat-x;
}

However, it works with background-color, not with, the image.

+5
2
  • CSS ().
  • .

Chrome.

Chrome ( ), . , :

enter image description here

, ( doctype, no <html>, <body> ..) - , " ". , . , , W3.

:

Live Demo
( <base>, )

, , <base>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<base href="http://toro.azwestern.edu/~zbl/" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<link rel="stylesheet" href="style.css" type="text/css" />

<div id="cp">
    <div class="cp-item"><span>
        <div class="cp-item-icon"><img src="images/syssec.png" title="System and Security" /></div>
        <div class="cp-item-content">
            <h4>System and Security</h4>
            <ul>
                <li><a href="#">item</a></li>

                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
            </ul>

        </div>
    </span></div>
</div>

</body>
</html>
+6

#cp .cp-item:hover #cp div.cp-item:hover

+1

More articles:


All Articles