Question

我正在使用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而不是图像。

Answer 1

您的CSS没有任何（相关）错误。
图片的路径正确无误。

它已在Chrome中使用。

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

enter image description here

它在其他浏览器中不起作用，因为您没有正确的页面结构（没有doctype，没有<html>标记，没有<body>标记等） - 您的网页{{3} }，其他浏览器不“喜欢它”。我不知道为什么它与其他浏览器不兼容的确切原因 - 我想这个原因要么是实现细节，要么埋没在W3规范中。

这适用于“所有浏览器”：

doesn't validate
（我使用<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>

Answer 2

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

CSS Hover +背景图片

2 个答案: