CSS悬停+背景图片 [英] CSS Hover+Background Image
问题描述
我正在使用HTML / CSS创建一个特殊的UI控件来模仿Windows 7控制面板按钮。到目前为止，我的布局正确，现在我想添加一些化妆品。
如此处所示，当您出现渐变时
，其他浏览器不喜欢它。我不知道为什么它不能与其他浏览器一起工作的确切原因 - 我想其原因是要么是实现细节，要么埋在W3规范中。
这适用于所有浏览器：
Live Demo
（我正在使用< base> / code>标签来使路径工作）
这是您的确切代码，包装在典型的样板中，并添加了<$ c
$ b
<！DOCTYPE html PUBLIC - // < base>标记。 W3C // DTD XHTML 1.0 Transitional // ENhttp://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-Typecontent =text / html; charset = utf-8/>
< / head>
< body>
< link rel =stylesheethref =style.csstype =text / css/>
< div id =cp>
< div class =cp-item>< span>
< div class =cp-item-icon>< img src =images / syssec.pngtitle =系统和安全/>< / div>
< div class =cp-item-content>
< h4>系统和安全< / h4>
< ul>
< li>< a href =＃>项目< / a>< / li>
< li>< a href =＃>项目< / a>< / li>
< li>< a href =＃>项目< / a>< / li>
< li>< a href =＃>项目< / a>< / li>
< li>< a href =＃>项目< / a>< / li>
< li>< a href =＃>项目< / a>< / li>
< / ul>
< / div>
< / span>< / div>
< / div>
< / body>
< / html>
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>
这篇关于CSS悬停+背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
