我已经尝试了很多次,但还没有成功。
当我将鼠标悬停在这段文字上时。
如果有人能够做到,我希望仅使用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>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
a.info{
position:relative; /*this is the key*/
color:#000;
top:100px;
left:50px;
text-decoration:none;
text-align:center;
}
a.info span{display: none}
a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:-60px;
width:15em;
border:5px solid #0cf;
background-color:#cff; color:#000;
text-align: center;
padding:10px;
}
a.info:hover span:after{ /*the span will display just on :hover state*/
content:'';
position:absolute;
bottom:-11px;
width:10px;
height:10px;
border-bottom:5px solid #0cf;
border-right:5px solid #0cf;
background:#cff;
left:50%;
margin-left:-5px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
</style>
</head>
<body>
<a href="#" class="info">Shailender Arora <span>TOOLTIP</span></a>
</div>
</body>
</html>
您还可以通过在悬停时切换显示:块和无悬停的显示:无来产生效果。
div.appear {
width: 250px;
border: #000 2px solid;
background:#F8F8F8;
position: relative;
top: 5px;
left:15px;
display:none;
padding: 0 20px 20px 20px;
z-index: 1000000;
}
div.hover {
cursor:pointer;
width: 5px;
}
div.hover:hover div.appear {
display:block;
}
<div class="hover">
<img src="questionmark.png"/>
<div class="appear">
<h1>My popup</h1>Hitherto and whenceforth.
</div>
</div>
他们说的完全正确,这会起作用。
在父元素中设定最大高度。
我正在使用sandeep的示例,并添加了最大高度,如果需要,您可以添加最大宽度属性。文本将保持在应该保持的位置(如果可能,在某些情况下,您需要更改一些值才能使其保持在那里)。
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;
max-height: 10px;
}
p:hover span{
display:block;
}
在倒数第二个p段落中,最后一行使用max-height。
在评价它无用之前,请先测试它。