如何将图像用于活动和悬停链接？

-2

我正在尝试创建一个导航菜单，使图像从其他图像更改为显示其在特定页面上。它将与悬停项目一样。我不确定最好的解决方案是什么，在搜索时我完全困惑，因为我应该如何去做这件事。我在html中的菜单是这样设置的。如何将图像用于活动和悬停链接？

<ul id="main-nav"> 
    <li id="list-1" class="item1"><a href="#"><img src="images/nav1_0.png"></a></li> 
    <li id="list-2" class="item2"><a href="#"><img src="images/nav2_0.png"></a></li> 
    <li id="list-3" class="item3"><a href="#"><img src="images/nav3_0.png"></a></li> 
    <li id="list-4" class="item4"><a href="#"><img src="images/nav4_0.png"></a></li> 
    <li id="list-5" class="item5"><a href="#"><img src="images/nav5_0.png"></a></li> 
    <li id="list-6" class="item6"><a href="#"><img src="images/nav6_0.png"></a></li> 
    </ul>

我以为我应该使用背景图像，但是我怎么会添加链接到li元素中没有内容的菜单？

来源

2013-06-05 Alex Howell

在您的锚定标签上设置背景图片 – Turnip

想要发布一些CSS？另外，如果你设置了一个集成了代码的jsfiddle，那就太好了。 – Supplement

您可以将<a>标记的显示更改为阻止并指定所需的大小以匹配背景图像的大小。我也建议使用一个精灵作为背景图片，然后改变背景位置。

全部放在一起：

#main-nav li a { 
    display: block; 
    /* in this example I am using width of 50px and height of 20px for the background image */ 
    width: 50px; 
    height: 20px; 
    /* note: nav.png is assumed to be name of new sprite */ 
    background-image: url('images/nav.png'); 
} 

/* There assume sprite is horizontally arranged (i.e. 300px wide by 20px high) */ 
#main-nav li.item1 a { 
    background-position: 0px 0px; 
} 

#main-nav li.item2 a { 
    background-position: -50px 0px; 
} 

... 

#main-nav li.item6 a { 
    background-position: -250px 0px; 
}

如果你想有一个悬停状态，你可以添加到你的精灵，以及通过增加图像的第二行以你的精灵（即使得它采用300 x 300像素到40像素的这个例子）。并添加这样的规则：

#main-nav li.item1 a:hover { 
    background-position: 0px -20px; 
} 

#main-nav li.item2 a:hover { 
    background-position: -50px -20px; 
} 

... 

#main-nav li.item6 a:hover { 
    background-position: -250px -20px; 
}

精灵是一个关键的概念，你应该在这里学习。单个组合图像比单个图像小，并且需要浏览器需要更少的整体辅助请求。这意味着对于具有悬停条件的背景图像，您需要单个图像下载而不是12个。

来源

2013-06-05 21:48:01

如何将图像用于活动和悬停链接？

回答

相关问题