首页新闻找找看学习计划

鼠标hover 按钮中图片切换

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

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

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

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

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

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

s是网页还是桌面程序?

收获园豆:5
Firen | 园豆:5483 (大侠五级) | 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
骑着蜗牛耍流氓 | 园豆:178 (初学一级) | 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 | 园豆:162 (初学一级) | 2014-09-12 09:43
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册