CSS Hover+Background Image_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-13 05:21 出处：网络

I\'m creating a special UI control using HTML/CSS to mimic the Windows 7 Control Panel buttons. So far, I\'ve got the layout right and now I\'d like to add some cosmetics to it.

I'm creating a special UI control using HTML/CSS to mimic the Windows 7 Control Panel buttons. So far, I've got the layout right and now I'd like to add some cosmetics to it.

As seen here, there is a gradient that appears when you hover over the button with your mouse.

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

Now, you can see here that I've got the layout done. I'd like to add a :hover effect to the whole div item with a background image.

Currently, here i开发者_StackOverflow中文版s what I have for the CSS- yet it doesn't work. No image shows up in IE8, or FireFox

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

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

It does however work with a background-color rather than an image.

There's nothing (relevant) wrong with your CSS.
The path to your image is correct.

It already works in Chrome.

Chrome seems to be more intelligent (or lenient) than other browsers. If I inspect the page, it's inserting stuff:

CSS Hover+Background Image

It doesn't work in other browsers because you don't have a proper page structure (no doctype, no <html> tag, no <body> tag, etc) - your page doesn't validate, and the other browsers do not "like it". I don't know the exact reason why it doesn't work with the other browsers - I imagine the reason is either an implementation detail, or buried within the W3 spec.

This works in "all browsers":

Live Demo
(I'm using the <base> tag to make the paths work)

It's your exact code, wrapped in typical boilerplate, with the addition of the <base> tag.

<!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>

try to change the #cp .cp-item:hover to #cp div.cp-item:hover