css中按钮变色,CSS控制按钮变色（有图有真相）

昨天有一个朋友问我，我网站右上角那几个按钮，鼠标经过时变色是怎么做到的，我答道是用CSS控制

的，他大吃一惊，说还以为我是用javascript来实现的，怎么CSS也可以实现这种特效吗?我无语。。

好吧，虽然网上已经很多这类的教程了，但既然某些懒人还是懒得自己去找，那我就在这里写一次吧，

CSS有三个伪类用来控制访问样式，分别是a:link,a:hover和a:visited。

a:link就是链接正常时的样式，a:hover是鼠标经过时链接的样式，而a:visited则是已经访问过的链接的

样式。它们有几个常用的属性：

text-decoration：控制链接文本的下划线

color：控制链接文本的颜色

background-color：链接的背景颜色

background-image：用来放置背景图片的

通常我们会把链接做成列表，譬如

href="XXX.html">按钮1
href="XXX.html">按钮2

很多写CSS的时候就会直接写

.button ul li a{background-image:url(XXX.gif); width:80px;

height:30px;}

然后出来的效果根本不是这么回事，背景图片只显示了很小的一块，不能显示整个按钮出来。

这里有一个误区，我们知道标签是属于内联元素(不知道内联元素和块元素概念的童鞋请自行百度

一下)，内联元素是没有宽度和高度属性的，所以你在CSS中指定的宽度和高度是没有用的，背景图片

还是会按照内联元素的方式来显示标签中的内容。

所以，首先要把标签先转换成块元素来显示

.button ul li a{ display:block; background-image:url(XXX.gif);

width:80px; height:30px; line-

height:30px;}

还要加上line-height行高，这样背景图片就会正常显示了

OK，我们来个实例，先用photoshop做好按钮的两个样式，分别是正常时和鼠标经过时的样式，如图

1、这个是正常时的gif图片

CSS代码：.button ul li a{ display:block;

text-decoration:none;

background:url(../images/button.gif)

no-repeat;

color:#fff; } //这里的color是文本字体的颜色

2、这个是鼠标经过时的gif图片

CSS代码：.button ul li a:hover{

color:#fff; //同上

text-decoration:none;

background:url(../images/button2.gif)

no-repeat; }

css中按钮变色,CSS控制按钮变色（有图有真相）相关推荐

css button 四种状态,css中按钮的四种状态
css中按钮有四种状态普通状态 hover 鼠标悬停状态 active 点击状态 focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后的蓝色边框下面的 ...
css中内编,CSS
在微信小程序之中,对盒子布局的时候,我们要注意布局大小不要超过页面的宽度,否则会出现布局混乱的问题这是.wxml内容: 复制密文点击加密这是.wxss.encryption{ box-sizin ...
css中repeat用法,CSS background-repeat用法及代码示例
CSS中的background-repeat属性用于水平和垂直重复背景图像.它还决定是否重复background-image. 用法 background-repeat:repeat|repeat-x ...
css中left属性,CSS left属性用法及代码示例
CSS中的left属性用于指定定位元素的水平位置.它对未定位的元素没有影响. 注意: 如果position属性是绝对或固定的,则left属性指定元素左边与其包含块的左边之间的距离. 如果positio ...
HTML中注释写法 CSS中注释写法,CSS注解语法,HTML中CSS注释
CSS注释教程篇一.CSS注解语法在CSS代码中进行注解注释语法: /* 注解注释内容 */ 二.HTML中CSS注释我们在HTML中直接使用style标签进行设置CSS样式,那CSS注释注解时 ...
HTML中注释写法 CSS中注释写法,css注释怎么写?
什么是CSS注释?CSS文件中注释怎么写?本篇文章将向你介绍css注释的作用及写法,希望对各位有帮助. css注释怎么写? 一:css注释是什么? css注解(css 注解)又被称作CSS注释(css ...
css中的inset,CSS inset()用法及代码示例
inset()函数是CSS中的内置函数,与filter属性一起使用以更改图像的插入. 用法: inset( length | percentage ); 参数:此函数接受单个参数长度,该参数长度用于保 ...
html css中文字段落,css中文字行间距怎么设置？
在网页的布局中几大段文字挤在一起总归是不好看的,这时候我们就需要来设置行间距来让文字看起来不拥挤,也让整个页面看起来美观整洁,那么,行间距该如何设置呢?本篇文章就来给大家介绍一下css行间距的设置方法 ...
css中的 type,css中如何使用list-style-type属性
css中如何使用list-style-type属性发布时间:2020-09-24 10:05:15 来源:亿速云阅读:88 作者:小新小编给大家分享一下css中如何使用list-style-ty ...

css中按钮变色,CSS控制按钮变色（有图有真相）

css中按钮变色,CSS控制按钮变色（有图有真相）相关推荐

最新文章

热门文章