这些网页导航按钮是怎样制作的?
今天下午我忽然想到如何用css实现鼠标经过按钮时的不同状态,而且当点击后只有被点击按钮变成
与其它不同,而其它的都相同。会用css的人都知道,实现鼠标经过按钮时的不同状态很简单,现在
我写个举个例子:
。 over {
background-image:url("images/ f");
background-position:center cente;
background-repeat:no-repeat;
width:127px;
height:58px;
}
。 out {
background-image:url("images/ f");
background-positi...全部
今天下午我忽然想到如何用css实现鼠标经过按钮时的不同状态,而且当点击后只有被点击按钮变成
与其它不同,而其它的都相同。会用css的人都知道,实现鼠标经过按钮时的不同状态很简单,现在
我写个举个例子:
。
over {
background-image:url("images/ f");
background-position:center cente;
background-repeat:no-repeat;
width:127px;
height:58px;
}
。
out {
background-image:url("images/ f");
background-position:center cente;
background-repeat:no-repeat;
width:127px;
height:58px;
}
。
link {
background-image:url("images/ f");
background-position:center cente;
background-repeat:no-repeat;
width:127px;
height:58px;
}
而在表格中加上但这样做的效果是,只有当鼠标作用在按钮上是时才起
作用,而鼠标出来后就是out状态了,就算你点击其它按钮,鼠标动作的按钮还是out状态。
这不是我
们要的效果,那么如何才能实现我们要的效果呢?由于我是做界面的(不会程序,唉),只有用最笨
的方法了
方法如下:
。link {
background-image:url("images/ f");/* 紫色 */
background-position:center cente;
background-repeat:no-repeat;
width:127px;
height:58px;
display:block;
}
。
link a:hover{
background-image:url("images/ f");/* 黄色 */
background-position:center cente;
background-repeat:no-repeat;
width:127px;
height:58px;
display:block;
}
。
select a{
background-image:url("images/ f");/* 蓝色 */
background-position:center cente;
background-repeat:no-repeat;
width:127px;
height:58px;
display:block;
}
。
select a:link{
background-image:url("images/ f");/* 蓝色 */
background-position:center cente;
background-repeat:no-repeat;
width:127px;
height:58px;
display:block;
}
在 ml界面中对于button1(紫色) text
对于button2(紫色) text
在 ml界面中对于button1(紫色) text
对于button2(紫色) text
这样一来,只有链接本页的按钮变色,其它还是原来色啦!而鼠标经过时的那一瞬间的变化包含
在。
link a:hover中了。
/* 基本实现思想就是这样,到于按钮上如果有文字的话如何变,我想你会这个按钮变化后,文字也
不会是个问题的 */
。收起