|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
有了CSS,我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题,改变字体颜色,字体样式等等
破洛洛文章简介:CSS实例:鼠标滑过笔墨超等链接背景变色.
效果以下图
要完成这个效果。很复杂。界说CSS款式
a:hover{
background:#f29901;
}
这段代码的显现效果以下图
明显,如许太丑了。
只必要再加上一句
a:hover{
background:#f29901;
display:block;
}
便可如最终效果所示,当鼠标挪动到超链接上的时分,全部li元素背景变色。
但是如许另有一个成绩,鼠标必需挪动到笔墨下面才干触发a:hover效果。
假如想要鼠标挪动到元素li上的时分,就触发a:hover效果。能够如许写
a{
width:130px;
/*li元素的宽度,也就是相称于界说了一个宽度局限,当鼠标挪动到下面的局限的时分就触发a:hover效果*/
}
a:hover{
background:#f29901;
display:block;
}
上面附上完全例子代码:
html代码:
<ulid="content">
<li><ahref="javascript:;">导航菜单1</a></li>
<li><ahref="javascript:;">导航菜单2</a></li>
<li><ahref="javascript:;">导航菜单3</a></li>
<li><ahref="javascript:;">导航菜单4</a></li>
<li><ahref="javascript:;">导航菜单5</a></li>
<li><ahref="javascript:;">导航菜单6</a></li>
</ul>
css代码:
#content{}
#contentli{
line-height:30px;
text-align:center;
color:#fff;
display:block;
background:#333;
width:100px;
}
#contentlia{
display:block;
float:right;
background:#333;
width:100px;
color:#fff;
text-decoration:none;
}
#contentlia:hover{
color:#000;
background:#fff;
}
成绩固然小,可是经由本人研讨办理印象加倍深入
最新版本html5+css3与2014年10月29日,万维网联盟宣布,经过几乎8年的艰辛努力,该标准规范终于最终制定完成。 |
|