如何使用纯CSS在鼠标悬停文本时创建一个框？

Question

如何使用纯CSS在鼠标悬停文本时创建一个框？

css

21

我已经尝试了很多次，但还没有成功。当我将鼠标悬停在这段文字上时。

enter image description here

然后它必须显示这个框。

enter image description here

如果有人能够做到，我希望仅使用CSS来实现这种效果。

- Rohit Azad Malik

也许你会对这个答案感兴趣 - https://dev59.com/XnNA5IYBdhLWcg3wL62x#25836471 - Josh Crozier

5个回答

3

您可以通过简单的代码轻松地创建此CSS工具提示：

    <!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>

http://jsbin.com/ebucoz/25/edit

- Shailender Arora

2

您还可以通过在悬停时切换显示：块和无悬停的显示：无来产生效果。

- Ankit

1

这是对其他答案的小调整。如果您有嵌套的div，您可以在弹出窗口中包含更加精彩的内容，例如H1标题。

CSS

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;
}

HTML

<div class="hover">
<img src="questionmark.png"/>
    <div class="appear">
       <h1>My popup</h1>Hitherto and whenceforth.
    </div>
</div>

这些解决方案的问题在于弹出窗口显示后，页面中此后的所有内容都会被移动，即页面的其余部分向下“腾出空间”。我唯一能够解决这个问题的方法是将位置设置为absolute并删除top和left CSS标签。

- Chris

1

他们说的完全正确，这会起作用。

在父元素中设定最大高度。

我正在使用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。

在评价它无用之前，请先测试它。

- Jesus D.

3

这个回答相较于现有的回答有什么新增的内容吗？ - cimmanon

添加了max-height和max-width属性，当光标位于文本上方并且显示框时，不会发生任何偏移。 - Jesus D.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sandeep · Accepted Answer

你可以这样写：

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/