css - 使 3 件按钮在 css 中正确组合在一起

Question

好的，所以我总共有 6 个文件。

button_01.png(按钮左侧)

button_01-RO.png( Angular 色转换)

button_02.png(中间)

button_02-RO.png( Angular 色转换)

button_03.png(按钮右侧)

button_03-RO.png( Angular 色转换)

下面是图片链接。它们按上面的顺序列出。 http://imgur.com/fPIkNAW http://imgur.com/3ZWVuzz http://imgur.com/iQVzaf2 http://imgur.com/BsT6WiI http://imgur.com/mpGZxAu http://imgur.com/GOXRwdj#5

这是 fiddle 链接 http://jsfiddle.net/gC2L3/

我有以下代码。但是左右图像没有设置在正确的位置。它只是在文本之上。我在做这个级别的按钮方面很新。我到处搜索如何执行此操作，但我一直无法找到一种方法来完成 Angular 色。而我下面的尝试显然不起作用。这里的每个人都非常乐于助人。我希望这里有人会知道如何做到这一点。我花了 4 个多小时尝试不同的方法来让它工作，现在我放弃了，希望这里有人能提供帮助。谢谢，麻烦您了。一切正常，只是左右没有放好。

<style>
li.link-button {
float: left;
background: url('/opserv/assets/button_02.png') repeat-x;
}
.link-button a {
font-family: Arial;
color: White;
text-decoration: none;
background: url('/opserv/assets/button_01.png') left no-repeat;
}
.link-button span {
padding-left: 8px;
padding-right: 8px;
background: url('/opserv/assets/button_03.png') right no-repeat;
}
li.link-button:hover {
float: left;
background: url('/opserv/assets/button_02-RO.png') repeat-x;
}
.link-button:hover a {
font-family: Arial;
color: White;
text-decoration: none;
background: url('/opserv/assets/button_01-RO.png') left no-repeat;
}
.link-button:hover span {
padding-left: 8px;
padding-right: 8px;
background: url('/opserv/assets/button_03-RO.png') right no-repeat;
}
</style>

<ul>
<li class="link-button">
<a href="#"><span>Press Me</span></a>
</li>
</ul>

Answer 1

一个小的 jQuery 脚本就可以做到。你可以使用这样的东西:http://api.jquery.com/toggleclass/