例如,这个图里鼠标经过文字上面的蓝色条纹时,蓝色条纹和字体颜色一起改变?
<meta charset="utf-8" />
<ul id="nav">
<li><a href="####">首页</a></li>
<li><a href="####">关于我们</a></li>
<li><a href="####">发展理念</a></li>
</ul>
<style>
#nav{
width: 200px;
}
#nav a{
display: block;/*设置成块级元素让链接成为一个可点击方块而不是仅仅文字可点*/
border-top: 3px solid blue;/*顶部设置蓝色边线,你愿意的话也可以用图片背景做点更复杂的小花样,比如波浪线*/
background: #eee;
line-height: 30px;
text-align: center;
}
/*a:hover里面设置边框、字体、背景颜色鼠标悬停的状态*/
#nav a:hover{
border-color: red;
color: green;
font-size: 16px;
}
ul, ol, li {
list-style:none outside none;
}
a{
text-decoration: none;
font-size: 14px;
}
</style>
<ul id="nav">
<li><a href="####">首页</a></li>
<li><a href="####">关于我们</a></li>
<li><a href="####">发展理念</a></li>
</ul>
<style>
#nav{
width: 200px;
}
#nav a{
display: block;/*设置成块级元素让链接成为一个可点击方块而不是仅仅文字可点*/
border-top: 3px solid blue;/*顶部设置蓝色边线,你愿意的话也可以用图片背景做点更复杂的小花样,比如波浪线*/
background: #eee;
line-height: 30px;
text-align: center;
}
/*a:hover里面设置边框、字体、背景颜色鼠标悬停的状态*/
#nav a:hover{
border-color: red;
color: green;
font-size: 16px;
}
ul, ol, li {
list-style:none outside none;
}
a{
text-decoration: none;
font-size: 14px;
}
</style>
温馨提示:答案为网友推荐,仅供参考
第1个回答 2015-05-10
上面的蓝色条纹应该是元素边框,只要在css中修改经过时边框颜色应该就可以了