CSS 悬停+背景图片-前端问题

CSS Hover+Background Image(CSS 悬停+背景图片)

本文介绍了CSS 悬停+背景图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 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>


                        
这篇关于CSS 悬停+背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

问题描述

基础教程推荐