CSS Hover +背景图片

Question

CSS Hover +背景图片

Zac*_*ack 5 css doctype background-image hover

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

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

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

现在,你可以看到这里,我已经完成了布局.我想:hover用背景图片为整个div项添加效果.

目前,这是我对CSS的所有 - 但它不起作用.IE8或FireFox中没有显示图像

编辑:它适用于Chrome,但不适用于FireFox或IE.

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

Run Code Online (Sandbox Code Playgroud)

然而,它确实适用background-color于图像而不是图像.

Answer 1

thi*_*dot 6

您的CSS没有任何(相关)错误.
图像的路径是正确的.

它已在Chrome中运行.

Chrome似乎比其他浏览器更智能(或更宽松).如果我检查页面,它插入的东西:

在此输入图像描述

它在其他浏览器中不起作用,因为您没有正确的页面结构(没有doctype,没有<html>标签,没有<body>标签等) - 您的页面没有验证,而其他浏览器不"喜欢它".我不知道确切的原因,为什么它不与其他浏览器-我想象的原因或者是一个实现细节,或埋在W3规范之内.

这适用于"所有浏览器":

现场演示
(我使用<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，8 月前
查看次数：	4416 次
最近记录：	14 年，7 月前