CSS 悬停+背景图片

2022-01-22 00:00:00 background-image hover css doctype

我正在使用 HTML/CSS 创建一个特殊的 UI 控件来模仿 Windows 7 控制面板按钮.到目前为止，我已经完成了布局，现在我想在其中添加一些化妆品.

如此处所示，当您将鼠标悬停在按钮上时会出现一个渐变.

，其他浏览器不喜欢".我不知道为什么它不适用于其他浏览器的确切原因 - 我想原因要么是实现细节，要么隐藏在 W3 规范中.

这适用于所有浏览器":

现场演示
(我使用 <base> 标签来使路径工作)

这是您的确切代码，包含在典型的样板文件中，并添加了 <base> 标记.

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 is 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:



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>


	
		相关文章