CSS：背景图像在悬停按钮上不起作用答案

【问题标题】：CSS: Background image not working on hover buttomCSS：背景图像在悬停按钮上不起作用
【发布时间】：2011-09-19 05:51:53
【问题描述】：

我只是想从上到下作为悬停传递，但是当鼠标在顶部时按钮没有反应。

HTML：

<!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>
<link rel="stylesheet" href="style/menuStyle.css" type="text/css" charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
    <ul id="menu">
        <li><a href="http://google.com">Home</a></li>
        <li><a href="http://google.com">About</a></li>
        <li><a href="http://google.com">Info</a></li>
        <li><a href="http://google.com">Gallery</a></li>
        <li><a href="http://google.com">Forum</a></li>
        <li><a href="http://google.com">Blog</a></li>    
    </ul>

</body>
</html>

CSS：

a {color:black; text-decoration: none; outline:none; float:left}
a:visited {color: black}
ul {list-style:none}

#menu a {display:block;
    width:100px;
    height:50px;
    background: url(../img/boton.png) top;
    text-align:center;
    line-height: 50px;
    display:inline}

#menu a:hover{ color:red;
            background:url(../img/boton.png) bottom}

下载项目： http://gabrielmeono.com/menu.zip

【问题讨论】：

我已经把它放到了 jsfiddle 中，我觉得还可以jsfiddle.net/4kPuu（虽然我没有下载你的项目）
我猜是评论引起的

标签： css image background hover

【解决方案1】：

您需要对 CSS 进行一些调整。

删除// cmets。这些不起作用并破坏了 CSS。如果需要使用 cmets，请使用/* your comment here */。

您需要设置background-position 以及background-repeat。通过设置 -'ve 背景位置，您可以向上移动背景图像，从而使您的图像成为焦点。还要设置no-repeat，只是为了安全。

您可以在以下位置阅读有关此技术的更多信息：http://css-tricks.com/158-css-sprites/

这是我想出的最终 CSS：

#menu a
{
    display:block;
    width:100px;
    height:50px;
    background-image: url(../img/boton.png);
    background-repeat: no-repeat;
    text-align:center;
    line-height: 50px;
    display:inline;
}

#menu a:hover, #menu a :active
{ 
    color:red;
    background-position: 0px -50px;
}

【讨论】：

我仍然无法使它工作，甚至文本都没有变成红色...... :(
@Gabriel：可能是缓存问题而不是 cookie 问题，但很高兴看到它的工作:)

【解决方案2】：

由于您在display:inline; 后面的评论，您的 css 无法正常工作

// is not a comment in css

你必须使用这个

/* this is a css comment */

如果你改变它，它应该可以正常工作

【讨论】：

我正要回答这个问题，但你打败了我 :-)
谢谢，我不知道，我想是不好的 php 习惯。