0

嗨，我也是 css 和 php 的新手，我尝试在我的 php 网站中使用它，我有如下 css，我试图在悬停时更改图像，但我收到错误，我的半图像仅更改...

在此处输入图像描述

虽然我使用的图像是，

在此处输入图像描述

在此处输入图像描述

我的CSS代码是，

#header #nav a {
    float:left;
    margin-left:7px; 
    padding-left:17px; 
    background:url("../design/nav-l.png") 0 -35px no-repeat; 
    text-decoration:none;
}
#header #nav a span {
    float:left; 
    display:block; 
    padding-right:17px; 
    background:url("../design/nav-r.png") 100% -35px no-repeat; 
    line-height:35px;
}
#header #nav a:hover { background-position:0 -100px; }
#header #nav a:hover span { background-position:100% -70px; }

希望您的回复提前谢谢！

此致，

4

2 回答 2

0

In the code below nav-r is your small image where nav-bg is your big bg image 

#header #nav a {
    color: #fff;
    float:left;
    margin-left:7px; 
    padding-left:17px; 
    background:url("nav-r.png") 0 -35px no-repeat; 
    text-decoration:none;
}
#header #nav a span {
    float:left; 
    display:block; 
    padding-right:17px; 
    background:url("nav-bg.png") 100% -35px no-repeat; 
    line-height:35px;
}
#header #nav a:hover { background-position:0 -70px; }
#header #nav a:hover span { background-position:100% -70px; }
</style>
</head>
<body>
<div id='header'>
    <div id='nav'>
        <a href='#'><span>Rajan Rawal</span></a>
    </div>
</div>
</body>
</html>

Once you check this out properly then you just change the below css and see magic

#header #nav a {
    color: #fff;
    float:left;
    margin-left:7px; 
    padding-left:17px; 
    background:url("nav-r.png") 0 0 no-repeat; 
    text-decoration:none;
}
#header #nav a span {
    float:left; 
    display:block; 
    padding-right:17px; 
    background:url("nav-bg.png") 100% 0 no-repeat; 
    line-height:35px;
}
于 2012-05-08T08:22:44.200 回答
0

您不能在同一个 CSS 值上混合 % 和 px。

background:url("../design/nav-r.png") 100% -35px no-repeat;
#header #nav a:hover span { background-position:100% -70px; }

这两行是无效的 CSS，可能导致解析器崩溃。首先使用 %或px 设置它们，但不能同时使用两者。

background-position: 100px -35px; <--- OK  
background-position: 100% 50% <--- OK  
background-position: 100% 100px <--- Invalid

如果在那之后 UI 的行为不正确，您应该使用像 Firebug 这样的网络检查器或浏览器内置的检查器来查看引擎盖下发生了什么。这通常会为您提供有关您的样式有什么问题的重要线索。

如果您在尝试使用网络检查器自己解决问题后仍然遇到问题，请更新问题的更多细节（您尝试了什么，结果如何），我们将更好地帮助您解决问题:)

于 2012-05-08T07:52:02.810 回答