Question

我想创建一个CSS类，以便我可以像这样使用它

<input type="button" class="hoverbuttons">

那么如何创建一个类以便我的按钮悬停？

我已经有两个按钮了。假设这些URL是URL1和URL2，我如何使用CSS使它们悬停？

Answer 1

最简单的方法是使用sprites。您需要将<input>代码更改为<a>代码：

<style>

a.link1 {
display:block;
height:10px;
background:url(image.jpg) no-repeat 0 0;
}

a.link1:hover {
background:url(image.jpg) no-repeat 0 -10px;
}

</style>

<a href="URL1" class="link1">foo</a>

Answer 2

网上有很多教程：

CSS Hover Dynamic Button。

Answer 3

只需应用以下规则：

.hoverbuttons { ... }
.hoverbuttons:hover { ... }

注意：在IE6上，以前的:hover伪类仅适用于<a>个元素。

Answer 4

http://www.pixelmill.com/support/support_article.aspx?ParentListID=al1015&articleid=kb101543

Answer 5

这样的事情：

<style type="text/css">
  .some {
      background-color:#0F9;
  }

  .some:hover {
      background-color:#F00;
  }  
</style>
</head>

<body>
<div class="some"> dsadsad </div>
</body>

如何制作悬停按钮？

5 个答案: