您的位置：首页 > Web前端 > CSS

鼠标移入移出，样式修改，显示隐藏提示消息

2016-07-27 20:08 651 查看
重要的有三点：

1.a标签中的ishow是自己定义的属性，自己输入值

2.a:hover表示鼠标移上去时，

3.a:hover:after{content:attr(ishow)}表示鼠标移上去后，显示提示消息

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>实践题 </title>

   <style type="text/css">

.tags {

    position: relative;

}

.tags:hover{

    background:blue;

}

.tags:hover:after {

    background: rgba(0,0,0,.8);

    border-radius: 10px;

    bottom: -34px;

    color: #fff;

    content: attr(ishow);

    left: 10%;

    padding: 5px 15px;

    position: absolute;

    z-index: 98;

    width: 350px;

}

</style>

</head>

<body>

<a class="tags" ishow="Text shown on hovering">Exposed text</a>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航