用CSS样式设置导航实现鼠标经过文字上面的条纹，然后文字和条纹的颜色一起改变？

html-css016

用CSS样式设置导航实现鼠标经过文字上面的条纹，然后文字和条纹的颜色一起改变？,第1张

<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> <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>

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        #test li{

            list-style: none

            float: left

            margin-right: 10px

        }

    </style>

</head>

<body>

<ul id="test">

    <li><a href="#">企业采购</a></li>

    <li>|</li>

    <li><a href="#">客户服务</a></li>

    <li>|</li>

    <li><a href="#">其他</a></li>

</ul>

</body>

</html>

希望能帮到您。