如何在纯CSS中将鼠标悬停在文本上时创建一个框?

前端之家收集整理的这篇文章主要介绍了如何在纯CSS中将鼠标悬停在文本上时创建一个框?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经尝试了很多次,但还没有解决.

当我把鼠标放在这个文本上

那么它必须给我看这个盒子

如果有人能做到这一点,我想纯粹用CSS来实现这个效果.

解决方法

你可以这样写:

CSS

span{
    background: none repeat scroll 0 0 #F8F8F8;
    border: 5px solid #DFDFDF;
    color: #717171;
    font-size: 13px;
    height: 30px;
    letter-spacing: 1px;
    line-height: 30px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    top: -80px;
    left:-30px;
    display:none;
    padding:0 20px;

}
span:after{
    content:'';
    position:absolute;
    bottom:-10px;
    width:10px;
    height:10px;
    border-bottom:5px solid #dfdfdf;
    border-right:5px solid #dfdfdf;
    background:#f8f8f8;
    left:50%;
    margin-left:-5px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}
p{
    margin:100px;
    float:left;
    position:relative;
    cursor:pointer;
}

p:hover span{
    display:block;
}

HTML

<p>Hover here<span>some text here ?</span></p>

检查这个http://jsfiddle.net/UNs9J/1/

原文链接:https://www.f2er.com/css/216626.html

猜你在找的CSS相关文章