2

在默认浏览器样式上发布了一个 control-buttnos 接口。我尝试使用带有图像作为值的标准按钮（）

HTML：

<div id="control-play" class="button"><span></span><input type="button" value=""/></div>

CSS：

#control-play span {background-image: url('../i/ruler/play.png'); margin: 16px 0 0 18px; position: absolute; width: 16px; height: 16px;}

但是，当光标悬停在图像上时，我当然会遇到 :hover 事件的问题：

情况

在 JS 中，我可以通过捕获图像的 onClick 来激活点击：

$('#control-play span').click(function(){$(this).parent().find('input').click();})

但我不能为 onHover 事件做到这一点。

如您所见，我不模仿 :hover {} 和 :active() 样式，我使用默认样式。我可以抓取图像并将它们用作背景，但这似乎不是一个好的技巧。

那么，同事们，有什么想法吗？欢迎使用任何 jQuery、CSS3 或 HTML5。

UPD：我仔细提到过，但大多数答案都建议切换按钮的整个背景。注意：我使用带有浏览器样式的按钮，我只是尝试使用 16x16 图标而不是文本标签。

4

5 回答 5

3 
<div class="button">
//height and width of this DIV should be same as `input[button]`
  <input type="button" />
</div>

<style>
.button{
   background: url("your_normal_image.jpg") no-repeat 0 0;
   height: 123px;
   width: 123px;
   }
.button:hover, .button.some_class{
   background: url("your_hover_image.jpg") no-repeat 0 0;
   }
.button input[type="button"]{
   opacity: 0;}

</style>

.some_class对于使用 Jquery添加的点击事件.button- 代码看起来像

  <div class="button some_class">
    //toggle between  ".some_class"

      <input type="button" />
    </div>

另一种方法是 - 玩风格而不是使用图像精灵方法background-position:添加类要了解更多信息：查看图像精灵文章.someclass

于 2012-08-16T14:09:38.160 回答
1

你有 3 个运行良好的 CSS 动作
注意： !important 将通过赋予这部分更高的优先级来强制背景发生变化

<style>
.button{
   background: url("background.png") no-repeat 0 0;
   height: 123px;
   width: 123px;
   border:0;   // this part is important otherwise it leaves the borders
   }
.button:hover{
  background: url("background.png") no-repeat -123px 0 !important ;
  }  //moves the bg image up
.button:active{
   background: url("background.png") no-repeat -246px 0 !important ;
  } //move the bg up  more when yu push the button
</style>

对于初学者，您可以使用 3 个单独的图像，这将导致第一次悬停或单击时加载延迟：

<style>
.button{
   background: url("background.png") no-repeat 0 0;
   height: 123px;
   width: 123px;
   border:0;   // this part is important otherwise it leaves the borders
   }
.button:hover{background: url("background1.png") no-repeat 0 0 !important;}   
.button:active{background: url("background2.png") no-repeat -246px 0 !important ;}  
</style>
于 2012-08-16T14:34:31.603 回答
0

如果我理解正确......你想使用精灵。Sprites 是在一张图像中同时具有 Hover BG 和 Standard BG 的背景图像。在这种情况下，两个 16px x 16px 的图像将位于一个总宽度为 32px x 16px 的图像文件中；

然后，您可以使用 CSS 切换背景位置，仅使用 CSS 创建平滑的悬停效果。

#control-play span 
{
    background-image: url('../i/ruler/play.png');
    width:16px;
    height:16px;
    background-position: 16px 0px;
}

#control-play span:hover
{
    background-position: -16px 0px;
}
于 2012-08-16T14:11:25.200 回答
0

我想说最语义化的方式是：

HTML：

<input type="button" class="button" value="Submit" />

或者

<button type="submit" class="button">Submit</button>

CSS：

.button {
display: block;
width: 16px;
height: 16px;
background: url('../i/ruler/play.png') top left;
border: 0;
}

.button:hover {
background-position: bottom;
cursor: pointer;
}

这样您就不必依赖任何 Javascript（也可以关闭 Javascript..）

于 2012-08-16T14:32:46.750 回答
0

最合适的答案是使用 HTML5<button>...</button>而不是<input type=button value=""/>

HTML：

<button type="button" id="control-play" title="Play"><span></span></button>

CSS：

button#control-play {width: 50px; height: 49px;}
button#control-play span {display: inline-block; background: url('../i/ruler/play.png') no-repeat;}

不需要精灵，3个背景可以模仿标准浏览器的按钮机会。每个人都会以自己喜欢的风格使用这些按钮（甚至使用浏览器的皮肤），只有我的图标是永久的。

通过Pointy的评论。

于 2012-08-17T06:07:25.310 回答