html – 更改整个导航背景上的导航精灵,而不仅仅是一个链接

概述我有一个完美的html / css精灵导航.当其无序列表中的每个链接悬停时,背景精灵图像会按预期更改,以用于该特定>项目.我想基于链接的>悬停在整个导航精灵移动位置,以便任何一个链接的效果改变整个无序列表的背景. 原因：每个内联的边缘不是垂直的,它们是45度角,因此更改传统的>块背景不能很好地工作.改变整个背景将适应并完美地工作. 目前正在使用的代码： CSS： #nav { positi 我有一个完美的HTML / CSS精灵导航.当其无序列表中的每个链接悬停时,背景精灵图像会按预期更改,以用于该特定>项目.我想基于链接的>悬停在整个导航精灵移动位置,以便任何一个链接的效果改变整个无序列表的背景.

原因：每个内联的边缘不是垂直的,它们是45度角,因此更改传统的>块背景不能很好地工作.改变整个背景将适应并完美地工作.

目前正在使用的代码：

CSS：

#nav {    position: relative;    float: right;    background: url('../gfx/nav.gif');    wIDth: 498px;    height: 23px;    margin: 110px 2px 0 0;    border: 0;    padding: 0;}#nav li {    position: absolute;    top: 0;    margin: 0;    border: 0;    padding: 0;    List-style: none;}#nav li,#nav a {    height: 23px;    display: block;}#nav span {    display: none;}#n1 {    left: 0;    wIDth: 73px;}#n2 {    left: 74px;    wIDth: 94px;}#n3 {    left: 167px;    wIDth: 124px;}#n4 {    left: 292px;    wIDth: 82px;}#n5 {    left: 375px;    wIDth: 125px;}#n1 a:hover {    background: transparent url('../gfx/nav.gif') 0 -23px no-repeat;}#n2 a:hover {    background: transparent url('../gfx/nav.gif') -74px -46px no-repeat;}#n3 a:hover {    background: transparent url('../gfx/nav.gif') -167px -69px no-repeat;}#n4 a:hover {    background: transparent url('../gfx/nav.gif') -292px -92px no-repeat;}#n5 a:hover {    background: transparent url('../gfx/nav.gif') -375px -115px no-repeat;}

和HTML：

<ul ID="nav"> <li ID="n1"><a href="./"><span>Home</span></a></li> <li ID="n2"><a href="./?c=about"><span>About</span></a></li> <li ID="n3"><a href="./?c=programmes"><span>Programmes</span></a></li> <li ID="n4"><a href="./?c=grants"><span>Grants</span></a></li> <li ID="n5"><a href="./?c=publications"><span>Publications</span></a></li></ul>

那么如何使整个导航的背景精灵转换,垂直不同的数量取决于悬停的链接？假设没有任何类型的Js可以实现这一点.

谢谢. 总结

以上是内存溢出为你收集整理的html – 更改整个导航背景上的导航精灵,而不仅仅是一个链接全部内容，希望文章能够帮你解决html – 更改整个导航背景上的导航精灵,而不仅仅是一个链接所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。