如何在纯CSS中将鼠标悬停在文本上方时创建一个框？ [英] How to create a box when mouse over text in pure 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>将鼠标悬停在此处这里有一些文本？< / span>< / p& 
  

请检查此 http://jsfiddle.net/UNs9J/1/

I have tried many times to do this, but it has not worked out yet.

When I mouse over this text

Then it must show me this box

I want to achieve this effect purely with CSS if anybody can do this.

解决方案

You can write like this:

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>

Check this http://jsfiddle.net/UNs9J/1/

这篇关于如何在纯CSS中将鼠标悬停在文本上方时创建一个框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！