超级链接伪类应用实例

最新推荐文章于 2023-12-18 19:42:34 发布

花果山总钻风

最新推荐文章于 2023-12-18 19:42:34 发布

阅读量565

点赞数 1

分类专栏： HTML/CSS/JS

本文链接：https://blog.youkuaiyun.com/dszgf5717/article/details/47050861

版权

HTML/CSS/JS 专栏收录该内容

49 篇文章

订阅专栏

摘自《网页开发手记》

1、效果图：

2、html代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>超级链接伪类</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        h3{
            text-align: center;
        }
        #all{
            width: 400px;
            height: 180px;
            margin: 0px auto;
            padding: 10px;
            line-height: 1.8em;
            font-size: 12px;
            background-color: #eee;
            border: 1px solid #000;
        }
        a{
            text-decoration: none;
            position: relative;
            color: #00f;
            font-size: 12px;
        }
        .content{
            display: none;
        }
        a:hover{
            cursor: hand;
            background: #fff;
        }
        a:hover .content, a#aa:link .content, a#aa:visited .content{
            color: #f00;
            display: block;
            position: absolute;
            top: 25px;
            width: 350px;
            height: 150px;
            text-decoration: none;
            color: #000;
            background-color: #ffc;
            border: 1px dashed #fc6;
        }
        a#bb:hover .content{left: -30px;}
        a#cc:hover .content{left: -60px;}
        a#dd:hover .content{left: -90px;}
        a:active{color: #00f;}
        /*a:visited{color: #0f0;}*/
        /*a#aa:link .content{left: 0px;}*/
        a#aa:visited .content{left: 0px;}
    </style>
</head>
<body>
    <h3>门户网站</h3>
    <div id="all">
        <a href="#" id="aa">
            新闻
            <span class="content">
                这是新闻的内容1<hr/>
                这是新闻的内容2<hr/>
                这是新闻的内容3<hr/>
                这是新闻的内容4<hr/>
            </span>
        </a>
        <a href="#" id="bb">
            讨论
            <span class="content">
                这是讨论的内容1<hr/>
                这是讨论的内容2<hr/>
                这是讨论的内容3<hr/>
                这是讨论的内容4<hr/>
            </span>
        </a>
        <a href="#" id="cc">
            留言
            <span class="content">
                这是留言的内容1<hr/>
                这是留言的内容2<hr/>
                这是留言的内容3<hr/>
                这是留言的内容4<hr/>
            </span>
        </a>
        <a href="#" id="dd">
            博客
            <span class="content">
                这是博客的内容1<hr/>
                这是博客的内容2<hr/>
                这是博客的内容3<hr/>
                这是博客的内容4<hr/>
            </span>
        </a>
    </div>
</body>
</html>