首页 新闻 会员 周边 捐助

鼠标hover 按钮中图片切换

0
悬赏园豆：30 [已解决问题] 解决于 2014-12-19 20:54

大家好，我现在有个按钮，但是这个按钮长度是随屏幕大小变化的*%,没有固定长度，好像是不能直接更改整个按钮的背景图片吧

问题：按钮左边是一个小图标 右边是文字，当鼠标hover按钮的时候 怎么能把这个小图标自动切换成另外一个小图标，谢谢，谁能帮我看看 ，谢谢 大牛们！

逗号s的主页 逗号s | 初学一级 | 园豆：4
提问于：2014-09-10 22:23
< >
分享
最佳答案
0

可以的，你图片显示方式弄成拉伸就行，css就是价格hover样式，窗口程序就注册鼠标移入事件

收获园豆：5
吴瑞祥 | 高人七级 |园豆：29449 | 2014-09-11 08:29
其他回答(6)
0

s是网页还是桌面程序？

收获园豆：5
Firen | 园豆：5385 (大侠五级) | 2014-09-11 06:38
0

是WEB吗？为这个按钮定义两套CSS，分别应用于hover与常态，使用juery的trigger功能实现自由切换。

收获园豆：5
519740105 | 园豆：5810 (大侠五级) | 2014-09-11 07:30
0 
#btn{
    cursor:pointer; width:50px; height:50px; background:#F00;}
#btn:hover{
    width:50px; height:50px; background:#069;
    }
<div id="btn">按钮</div>

在样式中添加背景图片就行了

收获园豆：5
骑着蜗牛耍流氓 | 园豆：135 (初学一级) | 2014-09-11 09:53
0

Web程序的话直接定义初始样式和hover样式就可以了。

收获园豆：5
晓菜鸟 | 园豆：2594 (老鸟四级) | 2014-09-11 18:42
0

大家好 ，我自己写了个样式勉强凑合，只是这图片是截取的，大小不一样，鼠标放上去这个小图片有点抖动@！

css:

.accordion-heading a {
    background: url('../images/btn_arrow1.jpg')  no-repeat scroll 12px 6px transparent;
}

    .accordion-heading a:hover {
        background: url('../images/btn_arrow2.jpg') no-repeat scroll 11px 4px transparent;
    }

html:

  <div class="accordion-heading">
      <a>待办任务 </a></div>

逗号s | 园豆：4 (初学一级) | 2014-09-11 21:24
0

那用JS也能控制啊， onmouseout  onmousemove

收获园豆：5
Aiolos丶M | 园豆：353 (菜鸟二级) | 2014-09-12 09:43
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。