CSS 悬停+背景图片答案

【问题标题】：CSS Hover+Background ImageCSS 悬停+背景图片
【发布时间】：2011-07-03 02:31:41
【问题描述】：

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

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

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

现在，您可以看到 here 我已经完成了布局。我想用背景图片为整个 div 项添加:hover 效果。

目前，这是我所拥有的 CSS- 但它不起作用。 IE8 或 FireFox 中不显示图像

编辑：它适用于 Chrome，但不适用于 FireFox 或 IE。

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

但它确实适用于 background-color 而不是图像。

【问题讨论】：

您确定路径正确吗？如果是，hoverbg.png 是否存在于 images 文件夹中？我相信的语法没有错。
需要注意的是，IE 只支持标签的 :hover 伪选择器。
我认为您只能使用标签“a”来用户：悬停。你在用吗？
@user194076 - 是的，我只是注意到在朋友告诉我它确实在 Chrome 中工作之后。我是通过 VNC 控制台亲自查看的，所以颜色并不表明它工作正常。
@Zack 和@thirtydot，你能为任何东西添加 CSS“悬停”选择器吗？还是只是一组特定的 html 项？

标签： css hover background-image doctype

【解决方案1】：

您的 CSS 没有任何（相关）问题。
图片路径正确。

它已经在 Chrome 中工作了。

Chrome 似乎比其他浏览器更智能（或宽松）。如果我检查页面，它会插入东西：

它在其他浏览器中不起作用，因为您没有正确的页面结构（没有 doctype、没有 <html> 标签、没有 <body> 标签等） - 您的页面 doesn't validate 和其他浏览器不喜欢”。我不知道为什么它不适用于其他浏览器的确切原因 - 我想原因要么是实现细节，要么隐藏在 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>

【讨论】：

啊哈。这很可能就是原因。我没有添加文档类型，因为我只是在创建它，然后当我完成并创建它时，我打算将它移到我的主项目中。谢谢！
没问题 :) 您可能想改用 HTML5 文档类型。 Dreamweaver 的 XHTML doctype 让我大吃一惊（谢谢，Dreamweaver！）
我没有指定文档类型。它由 WordPress 指定；特别是管理区域。所以，不管是什么，它都应该起作用。

【解决方案2】：

尝试将#cp .cp-item:hover 更改为#cp div.cp-item:hover

【讨论】：