纯CSS制做工具栏当电脑鼠标历经时会变色的

日期:2020-10-21 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

CSS款式为:

拷贝编码
编码以下:

<style type="text/css">
#navigation
{
width:200px;
font-family:Arial;
}
#navigation ul
{
list-style-type:none; /* 无法显示新项目标记*/
margin:0px;
padding:0px;
text-decoration:none;
}
#navigation li
{
border-bottom:1px solid #ED9F9F; /* 加上标识<li>的下划线*/
}
#navigation li a
{
display:block; /* 区块显示信息*/
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左侧的粗红边*/
border-right:1px solid #711515; /* 右边黑影*/
}
#navigation li a:link,#navigation li a:visited /* 超连接一切正常情况、被浏览过的情况*/
{
background-color:#c11136; /* 设定情况色*/
color:#FFFFFF; /* 设定文本色调*/
}
#navigation li a:hover /*电脑鼠标历经时*/
{
background-color:#990020; /* 更改情况色*/
color:#ffff00; /* 更改文本色调*/
}
</style>

HTML前台接待编码:

拷贝编码
编码以下:

<body>
<form id="form1" runat="server">
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Weather</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</form>
</body>

原始实际效果:
 
电脑鼠标历经实际效果: