怎样在css中设置链接鼠标移上去变换颜色的效果?

html-css040

怎样在css中设置链接鼠标移上去变换颜色的效果?,第1张

在CSS中,分别给这3个链接的<a>标签设置不同的CSS样式。

我假设你对这三个链接已经给了各自的id: "linka" 、"linkb"、 "linkc"

然后对这3个链接进行CSS设置:

#linka a:hover{color:pink}

#linkb a:hover{color:pink}

#linkc a:hover{color:gray}

这样即可。

这个怎么样我只能做这个了还不错吧/*大背景*/ body{ BACKGROUND-POSITION:center 90%BACKGROUND-ATTACHMENT: fixedBACKGROUND-IMAGE: url(

)} body background-color:#FFFFFF background-repeat: repeat-xbackground-position: top leftbackground-attachment: fixed} body a:link{text-decoration:nonecolor:#FF3399} body a:visited{text-decoration:nonecolor:#FF3399} body A:hover{text-decoration:nonecolor:#FF3399} body{scrollbar-face-color: #FFF1F7scrollbar-shadow-color: #FF3399scrollbar-highlight-color: #FF3399scrollbar-3dlight-color: #FFEEEEscrollbar-darkshadow-color:#FFEEEEscrollbar-arrow-color:#FF3399scrollbar-base-color: #FFFFFscrollbar-track-color: #FFFFFCURSOR:url('http://k688.com/sc/shubiao/591scimgcur/162.ani')}/*鼠标一*/ a{CURSOR:url('http://k688.com/sc/shubiao/591scimgcur/052.ani')}/*鼠标二*/ a:hover {position:relativeleft:1pxtop:1pxclip:rect()} overflow-y:autooverflow-x:auto} /*上部背景设置*/ #main {background:url()} #header{left:410pxheight:400pxbackground:#000000background:url(http://www.bz100.com/bz100infoPic/pic55/pic55420c1.jpg) no-repeattop center } #header{left:410pxheight:400pxbackground:#000000background:url(http://www.bz100.com/bz100infoPic/pic55/pic55420c1.jpg) no-repeattop left} #header div.lc{background:url() no-repeattop:-10pxleft:-5px } #header div.rc{width:200px!importanttop:0pxleft:890pxbackground: scroll url() no-repeat } #header div.tit{top:50pxleft:-200pxline-height:66pxfont-size:32pxfont-family:黑体color:#FFFFFF} /*空间名称位置*/ #header div.tit a.titlink{color:#FFFFFFfilter:glow(color:#E573AE,strength=3)height:12pxtext-decoration:none} #header div.tit a.titlink:visited{color:#FFFFFFfilter:glow(color:#E573AE,strength=3)height:12pxtext-decoration:non} #header div.desc{top:230pxleft:-300pxcolor:#E573AEfont-size:15pxFILTER:glow(color=#FFF1F7direction=1)}/*空间简介的位置*/ /*导航栏设置*/ #tab span {display:none} #tabline{display:none} #tab { TOP:375pxHEIGHT:40pxleft:-250px } #tab a{text-decoration:none} #tab a.on,#tab a.on:link,#tab a.on:visited ,/*Ñ¡ÖÐ*/{text-align:centerwidth:90pxcolor:#E37272font-size:13pxBACKGROUND: scroll url(

" target="_blank" >

) no-repeat 0px 0pxfilter:Alpha(opacity=60)font-family:Georgia} #tab a:link,#tab a:visited /*δѡÖÐ*/{color:#E37272text-align:centerwidth:90pxtext-decoration:nonefont-size:13pxline-height:32pxBACKGROUND: scroll url(

" target="_blank" >

) no-repeatfilter:Alpha(opacity=60)} #tab a:hover ,#tab a.on:hover{background: url("http://image.17173.com/bbs/upload/2005/10/25/1130204329.png") no-repeat -2px 0px} #tab2 span {color:#E37272font-size:12pxfont-weight:bold} #tab2 a TAB{font-size:12px} #tab2 a:link{color:#E37272} #tab2 a:visited{color:#E37272} /*除头部外的空间主体*/ .stage{} .stage {text-align:centerwidth:960px!importantmargin:10px 0px 0px 0pxbackground:url() repeat-y }/*内容区域背景中间图*/ .stagepad{ WIDTH:850px!importantmargin-left:10px}/*其他页面*/ #layout {width:780pxmargin-left:30pxbackground:url() no-repeat bottom 0pxpadding-bottom:26px}/*首页内容布局,横向划分为二版下面图*/ /*其它区域(即访问量等信息)-----------------------------------------------*/ #comm_info{font-size:14pxcolor:#666666font-family:Arialtext-align:left} #comm_info div.line{margin-top:10pxline-height:160pxbackground:url(http://i3.tinypic.com/vwpl55.gif) no-repeat center} #comm_info a{color:#666666} #page{height:30pxfont-size:14pxfont-family:Arialtext-align:center} #page span{padding:3pxcolor:#000000font-size:14pxfont-weight:bold} #page a.pc{color:#61AB8Afont-size:14pxfont-weight:bold} #page a.pc:visited{color:#61AB8A} #page a.pi{padding:3pxcolor:#61AB8Afont-size:14px} #page a.pi:visited{color:#61AB8A} .mod{margin-bottom:10pxborder:1px dotted #E573AE} .modhandle{cursor:move} .modth{height:20pxbackground:URL(http://image.17173.com/bbs/upload/2005/10/27/1130376374.gif) repeatcentertext-decoration:none}/*置顶花边*/ .modhead{padding:4px 4px 0 4px} .modopt{padding:4px 4px 0 0} .modtit{color:#666666font-size:13pxfont-weight:bold}a.modtit{color:#B444FF}a.modtit:visited{color:#666666filter} .modtitlink{color:#666666font-size:13pxfont-weight:bold}a.modtitlink{color:#B444FFtext-decoration:none}a.modtitlink:visited{color:#666666text-decoration:none}a.modtitlink:hover{color:#666666text-decoration:666666} .modact{color:#666666font-size:13px}a.modact:link{color:#666666}a.modact:visited{color:#666666} #mod_mylink1.mod{background:url(

) no-repeatbackground-position: bottompadding-bottom: 390pxfilter: alpha(opacity=80)} .modbox{padding:10px 10px 0 10pxbackground: url()} .modtl{} .modtr{line-height:1px} .modbl{line-height:1px} .modbc{line-height:1px} .modbr{line-height:1px} .modbox,.modbl,.modbc,.modbr{} #m_blog{background:transparent.modbl{background:transparent } .modbc{background:transparent } .modbr{background:transparent } /*文章区域-------------------------------------------------------------*/ #m_blog div.tit{text-decoration:nonefont-size:15pxcolor:#FF6699font-weight:boldline-height:40pxtext-indent:40pxbackground:url(

) no-repeat leftdecoration:none} #m_blog div.tit a{text-decoration:nonecolor:#FF6699font-size:15pxfont-weight:bold}} #m_blog DIV.tit A {FONT-WEIGHT: boldFONT-SIZE: 15pxCOLOR: #FF6699} #m_blog DIV.tit A:visited {COLOR:#FF00FF } /*文章标题栏*/ #m_blog div.date{background:url(http://bbs.9degree.com/UploadFile/2006-4/200642910433515725.gif) no-repeat TOP centercolor:lightslategraypadding-top:58pxtext-align:centermargin-left:10px} /*文章标题下方可插入图片*/ #m_blog div.cnt{color:#EB9C9Cline-height:20pxfont-size:14pxborder:3px dotted :#AD9585background:url(

) repeatPADDING: 10px} #m_blog div.cnt div{font-size:14px} #m_blog div.more{margin:14px 0 16px 0text-align:center} #m_blog div.more a{color:#E573AEtext-align:centerwidth:150pxtext-decoration:nonefont-size:12pxline-height:100pxBACKGROUND: scroll url(http://wysck.cn/source2008/07/05/08/023/761.gif) no-repeat} /*阅读全文图框*/ #m_blog div.more a:visited{color:#E573AE} #m_blog div.opt{color:#E573AEfont-size:13px} #m_blog div.opt a{color:#E573AEfont-size:13px} #m_blog div.opt a:visited{color:#E573AE} #m_blog div.line{margin-top:20pxline-height:50pxbackground:url(http://image.17173.com/bbs/upload/2006/02/06/1139224522.gif) repeat-x} /*分隔线*/ #m_blog div.none{padding:100px 0 100px 0color:#666666font-size:14px} http://wysck.cn/source2008/07/05/10/001/161.gif /*个人区域-------------------------------------------------------------*/ #m_pro a{color:#666666} #m_pro a:visited{color:#666666} #m_pro div.image{text-align:centerBACKGROUND: url() } /*个人头像处*/ #m_pro div.act{margin-top:5pxfont-weight:boldbackground:url(http://i3.tinypic.com/vwpm6w.gif) no-repeat bottompadding-bottom: 120pxmargin-bottom: 0px} /*头像下方插入图片*/ #m_pro div.user{margin-top:10pxcolor:#E573AEfont-size:15pxfont-weight:boldfilter:DropShadow(Color=#222222, OffX=1, OffY=1, Positive=true)text-align:center} #m_pro div.desc{color:#E573AEfont-size:12px} #m_pro div.line{line-height:280pxbackground:url() no-repeat top center} #m_pro td{color:#666666line-height:24pxfont-size:14px} /*相册区域-----------------------------------------------------------------*/ #m_album div.image{text-align:left} #m_album div.page{color:#333333font-size:6pxtext-align:center} #m_album div.page a{color:#333333font-size:6px} #m_album div.page a:visited{color:#333333} #m_album .phpage{margin-top:10pxpadding-bottom:5pxtext-align:center} #m_albumlist td.image{padding:5pxborder:1px solid #CFCFD7background:#CFCFD7} A IMG {FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=2)} A:hover IMG {FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=100)} /*图片光晕效果*/ /*友情链接区域-------------------------------------------------------------*/ #m_links div.item{color:#AD9585font-size:12pxline-height:15pxtext-indent:0pxbackground:url(

) no-repeat} #m_links div.item a{margin:0pxcolor:#E37272font-size:12pxtext-decoration:none} #m_links div.item a:visited{color:#E37272} #m_links div.line{margin-top:5pxline-height:8pxborder-top:1px solid #FFEEF1} #m_links {background:url(http://www.haotu.cn/0815/sucai/gif/46/images/xsgs_2_028.gif) no-repeatbackground-position: bottompadding-bottom: 0pxfilter: alpha(opacity=80)} /*名人blog*-------------------------------------------------------------*/ #m_mylink2 div.item{text-indent:25pxcolor:#EE9611font-size:14pxbackground:url(

" target="_blank" >

) no-repeat} #m_mylink2 div.item a{color:#666666font-size:12pxtext-decoration:none} #m_mylink2 div.item a:visited{color:#666666} #m_mylink2 div.line{margin-top:2pxline-height:16pxbackground:url(

" target="_blank" >

) no-repeat top center} /*猪友*-------------------------------------------------------------*/ #m_mylink1 {text-align:centerFILTER: glow(color=#FFFFFF,direction=2)} #m_mylink1 div.item{color:#EB9C9Cfont-size:12pxline-height:20pxtext-indent:18pxbackground:url(

) no-repeat} #m_mylink1 div.item a{color:#E37272font-size:13pxtext-decoration:none} #m_mylink1 div.line{margin-top17pxline-height:18pxborder-top:5pxbackground:url(http://www.cutehome.net/sozaiaa/line/4/sf_20041214182632.gif) repeat} #m_mylink2 div.item{color:#AD9585font-size:12px} #m_mylink2 div.item a{color:#E37272font-size:12pxtext-decoration:none} #m_mylink2 div.item a:visited{color:#E37272} #m_mylink2 div.line{margin-top:5pxline-height:8pxborder-top:1px solid #FFEEF1} #m_mylink2 {background:url(http://bbsimg.qq.com/2006/06/05/004/70.gif) no-repeat top centerpadding-top:50pxtext-decoration:none} #m_mylink3 div.item{text-indent:25pxcolor:#EE9611font-size:14pxbackground:url(

" target="_blank" >

) no-repeat} #m_mylink3 div.item a{color:#666666font-size:12pxtext-decoration:none} #m_mylink3 div.item a:visited{color:#666666} #m_mylink3 div.line{margin-top:2pxline-height:16pxbackground:url(

" target="_blank" >

) no-repeat top center} #m_mylink4 div.item{color:#AD9585font-size:12px} #m_mylink4 div.item a{color:#E37272font-size:12pxtext-decoration:none} #m_mylink4 div.item a:visited{color:#E37272} #m_mylink4 div.line{margin-top:5pxline-height:8pxborder-top:1px solid #FFEEF1} /*文章分类*-------------------------------------------------------------*/ #m_artclg /*滚动条*/{overflow-y:autoheight:px} #m_artclg div.item{color:#EB9C9Cfont-size:12pxline-height:21pxtext-indent:25pxbackground:url(http://photo1.yupoo.com/20070208/154613_1199042114_cewbmddv.jpg) no-repeat} #m_artclg div.item a{color:#666666font-size:12px} #m_artclg div.item a:visited{color:#666666} #m_artclg div.line{margin-top:5pxline-height:10pxborder-top:1px background:url(http://vivid.19.cloud.com.cn/main/Article/UploadFiles/200607/20060710210224403.gif) repeat-x center} /*最新评论-----------------------------------------------------------------*/ #m_comment/*滚动条*/{} #m_comment div.item{color:#666666font-size:12pxline-height:21pxtext-indent:25pxbackground:url(

" target="_blank" >

) no-repeat} #m_comment div.item a{color:#FF6699font-size:12px} #m_comment div.item a:visited{color:#FF6699} #m_comment div.item a.cnt{color:#666666font-size:12pxtext-decoration:none} #m_comment div.item a.cnt:visited{color:#666666text-decoration:none} #m_comment div.item a.cnt:hover{color:#66666text-decoration:underline} #m_comment div.line{margin-top:5pxline-height:16pxborder-top:1px background:url(http://image.17173.com/bbs/upload/2006/02/06/1139224158.gif) repeat-x center} #m_comment{filter:alpha(opacity=75)height:460pxbackground:url() no-repeat} /*网友评论-----------------------------------------------------------------*/ #in_comment 主体{width:710px} #in_comment div.tit/*标题*/{margin-bottom:12pxcolor:#666666font-size:14pxfont-weight:bold} #in_comment div.user/*发表人名*/{margin-bottom:6pxcolor:#666666font-size:12px} #in_comment div.user a/*发表人名(链接)*/{color:#FF6699font-size:12px} #in_comment div.user a:visited{color:#225C84} #in_comment div.user span.date/*发表时间*/{color:#666666font-size:12px} #in_comment div.desc/*评论内容*/{color:#666666font-size:12px} #in_comment div.line/*分界线*/{margin-top:5pxline-height:23pxborder-top:1px background:url(http://image.17173.com/bbs/upload/2006/02/04/1139055889.gif) repeat-x center} /*发表评论及留言板中添加留言的设置*/ #in_send div.tit{text-align:centercolor:grayfont-size:14pxfont-weight:bold}/*"发表评论"和"添加留言"的字体样式设置*/ #in_send td{color:silver}/*所有不在输入框以及提交按钮中的字体颜色设置*/ #in_send td a{color:#3399CC}/*超链接颜色设置,即验证码边上的"看不清"的颜色设置*/ #in_send td.f14 input{background:#252525color:FF3399border-top:2px solid darkgrayborder-left:2px solid dimgrayborder-bottom:2px solid blackborder-right:2px solid #444444}/*设置所有input标签的背景色,字体色以及突出效果*/ #spBlogCmtor,#spBlogCmtURL,#spBlogCmtText,#spBCmtText,#spBCmtAuthor,#spBCmtURL,#vercode input{background:#252525color:whiteborder-top:2px solid FF3399 !importantborder-left:2px solid #FF3399 !importantborder-bottom:2px solid FF3399 !importantborder-right:2px solid FF3399 !important}/*设置发表评论以及添加留言中各输入框的背景色,字体色以及内凹效果,并用!important设置为优先,这样就覆盖了上面的全input效果*/ #spBCmtText{background:url(

) no-repeat top centercolor:#FF3399font-size:16px}/*设置留言内容框的背景和字体设置*/ /*留言板中网友留言的设置*/ #in_msg{width:710px} #in_msg div.tit{margin-bottom:12pxcolor:#AD9585font-size:14pxfont-weight:bold} #in_msg .item td.index{width:40pxfont-weight:bold} #in_msg .item div.user{width:150pxcolor:#AD9585} #in_msg .item div.user a{color:#E37272font-size:12px} #in_msg .item div.user a:visited{color:#E37272} #in_msg .item div.user img{margin-bottom:5px} #in_msg .item td.cnt a{color:#E37272font-size:12px} #in_msg .item td.cnt a:visited{color:#3E37272} #in_msg span.date{color:#AD9585font-size:12px} #in_msg div.desc{margin-top:5pxcolor:#AD9585font-size:12px} #in_msg div.line{margin-top:17pxline-height:17pxborder-top:1px solid #FFEEF1} #in_msg div.line{margin-top:15pxline-height:20pxbackground:url(

" target="_blank" >

) repeat-x} /*文章存档区域-------------------------------------------------------------*/ #m_filed div.item{color:#FFFFFFfont-size:13pxline-height:21pxtext-indent:20pxbackground:url(

" target="_blank" >

) no-repeat left top} #m_filed div.item a{color:#colorfont-size:13px} #m_filed div.item a:visited{color:#color} #m_filed div.line{margin-top:5pxline-height:16pxborder-top:1px background:url(http://image.17173.com/bbs/upload/2005/10/25/1130204731.gif) repeat-x center} #m_filed {filter:alpha(opacity=75)height:260pxbackground:url() no-repeat} /*最近访客*-------------------------------------------------------------*/ #mod_track .modth .modtit{ font-family:"Georgia"font-size: 13pxcolor:#9B9B9B} #mod_track .modbox table td{border-bottom:#FF3399 dotted 2px} #mod_track .modbox table td img{width:50px!importantheight:50px!importantborder:#BCBCB8 4px double} #mod_track .modbox table td a img{filter:Alpha(opacity=80)-moz-opacity:0.5} #mod_track .modbox table td a:hover img{filter:Alpha(opacity=80)-moz-opacity:1} #mod_track .modbox table td a{text-decoration:nonecolor:#666666} 好友列表 #m_friend div.filter{margin-bottom:10pxpadding-left:10pxpadding-top:10pxheight:27pxline-height:27px} #m_friend div.catalog{margin-bottom:10pxpadding-left:10pxheight:27pxline-height:27pxbackground-color:#F2F2F2font-size:14px} #m_friend div.user{margin-top:4pxcolor:#6AB738font-size:12px} #m_friend div.user a{color:#666666font-size:12px} #m_friend div.user a:visited{color:#666666} #m_friend div.line{margin-top:10pxline-height:20pxborder-top:30px background:url(

" target="_blank" >

) repeat-x} /*媒体播放器-------------------------------------------------------------*/ #m_pro .basic a.nlk{display:none} #mod_bgmusic{background:url(

) no-repeat left} #phx{FILTER:Alpha(Opacity=3)HEIGHT: 150px} /*添加评论框背景-------------------------------------------------------------*/ #spBlogCmtText {color:#F0317Dfont-size:12pxborder: 1px solid #000000background:url(http://bbsimg1.qq.com/2006/09/10/000/380.gif) no-repeat top leftbackground:url(http://bbs.5617.com/attachment/Type_gif/52_186915.gif) no-repeat top rightfont-family: "Times New Roman", Times, seriftext-align: center} #pvshow{color:#FF3399font-family:"Georgia",font-size:16pt} /*添加图片的各种区域---------------------------------------------------------*/ #mod_links{background:url(

) no-repeatbackground-position: toppadding-top: 345px} #mod_comment{background:url(

) no-repeatbackground-position: toppadding-top: 375px} /*日历主体背景,边框----------------------------------------------------------*/ #m_cang div.item{color:#8CCEFBfont-size:12px} #m_cang div.item a{color:#8CCEFBfont-size:12pxtext-decoration:none} #m_cang div.item a:visited{color:#E37272} #m_cang div.line{margin-top:5pxline-height:8pxborder-top:1px solid #FFEEF1} div#cals *.cal_active{color:#000000text-decoration:nonefont-weight:boldBACKGROUND:url(http://photo1.yupoo.com/20070208/154611_842959271_egkguhlc.jpg) center no-repeatlinehight:12px} div#cals *.cal_select{padding:2pxborder:1px solid #FFBBC9background-color:#eeeeeecolor:#0000cctext-decoration:underline} div#cals{{background:url(

" target="_blank" >

) left}/*日历主体背景,边框*/ div#cals{{background:url(

" target="_blank" >

) left}/*日历主体背景,边框*/

樱花粉RGB值是 :红255,绿192,蓝203

RGB是从颜色发光的原理来设计定的,通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯,当它们的光相互叠合的时候,色彩相混,而亮度却等于两者亮度之总和,越混合亮度越高,即加法混合。

有色光可被无色光冲淡并变亮。如蓝色光与白光相遇,结果是产生更加明亮的浅蓝色光。知道它的混合原理后,在软件中设定颜色就容易理解了。

红、绿、蓝三盏灯的叠加情况,中心三色最亮的叠加区为白色,加法混合的特点:越叠加越明亮。

红、绿、蓝三个颜色通道每种色各分为255阶亮度,在0时"灯"最弱--是关掉的,而在255时"灯"最亮。当三色数值相同时为无色彩的灰度色,而三色都为255时为最亮的白色,都为0时为黑色。

RGB 颜色称为加成色,因为您通过将 R、G 和 B 添加在一起(即所有光线反射回眼睛)可产生白色。加成色用于照明光、电视和计算机显示器。例如,显示器通过红色、绿色和蓝色荧光粉发射光线产生颜色。绝大多数可视光谱都可表示为红、绿、蓝 (RGB) 三色光在不同比例和强度上的混合。这些颜色若发生重叠,则产生青、洋红和黄。

扩展资料:

由于网页(WEB)是基于计算机浏览器开发的媒体,所以颜色以光学颜色RGB(红、绿、蓝)为主。网页颜色是以16进制代码表示,一般格式为#DEFABC (字母范围从A-F,数字从0-9 );如黑色,在网页代码中便是:#000000(在css编写中可简写为#000)。当颜色代码为#AABB11时,可以简写为#AB1表示,如#135与#113355表示同样的颜色。

RGB1、RGB4、RGB8都是调色板类型的RGB格式,在描述这些媒体类型的格式细节时,通常会在BITMAPINFOHEADER数据结构后面跟着一个调色板(定义一系列颜色)。它们的图像数据并不是真正的颜色值,而是当前像素颜色值在调色板中的索引。以RGB1(2色位图)为例,比如它的调色板中定义的两种颜色值依次为0x000000(黑色)和0xFFFFFF(白色)…(每个像素用1位表示)表示对应各像素的颜色为:黑黑白白黑白黑白黑白白白。

参考资料:RGB-百度百科