CSS:背景图像不工作的悬停BUTTOM

我只是想从顶部传递到下一个悬停,但是当鼠标放在上面的BUTTOM没有反应。

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

--------------解决方案-------------

你需要做一些调整,你的CSS。

取出//注释。 这些不工作,打破了CSS。 如果你需要使用注释,使用/* 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;
}

你的CSS不工作,因为你的背后评论display:inline;

// is not a comment in css

相反,你必须使用此

/* this is a css comment */

如果你改变这一点,就应该正常工作

分类:CSS 时间:2015-03-15 人气:2
本文关键词: 图像,CSS,背景,悬停
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.600 (s). 10 q(s)