javascript - 在 Bootstrap 中通过悬停显示附加部分

Question

我有通过 Bootstrap 开发的价格表:

http://www.bootply.com/VyHsJBDoNc

如何将鼠标悬停在跨度(+ 更多信息!)上，使额外信息显示在所附的屏幕截图中。

提前致谢!

Answer 1

这是另一种解决方案

body
{
    margin-top: 60px;
}
.panel
{
    text-align: center;
}
.panel:hover { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px 5px rgba(130, 130, 130, 0.35); }
.panel-body
{
    padding: 0px;
    text-align: center;
}
.the-price
{
    background-color: rgba(220,220,220,.17);
    box-shadow: 0 1px 0 #dcdcdc, inset 0 1px 0 #fff;
    padding: 20px;
    margin: 0;
}
span.glyphicon-preload {
    color: #23b070;
    padding-right: 7px;
    font-size: 13px;
}
.table {
    margin-bottom: 0;
}
.table>tbody>tr>td {
    padding: 14px;
}
.btn-insta {
    margin-top: 13px;
    padding: 10px 0;
    font-size: 20px;
}
.the-price h1
{
    line-height: 1em;
    padding: 0;
    margin: 0 0 5px 0;
    font-weight: 700;
    font-size: 42px;
    color: #333;
}
.panel-title {
    font-weight: 700;
    font-size: 24px;  
}
.subscript
{
    font-size: 25px;
}
.table-premium p {
    font-weight: 700;
    display: inline-block;
    margin: 0;
}
.table-free p {
    display: inline-block;
    margin: 0;
}
span.mini {
    font-size: 18px;
    color: #31708f;
}
.info {
  display: none;
  position: absolute;
  width: 90%;
  margin: 0 auto;
  bottom: 40px;
  height: 200px;
  left: 5%;
  background: #5cb85c !important;
  padding: 10px;
}
.panel-footer:hover .info {
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 col-md-3">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Basic Plan</h3>
   
                </div>
                <div class="panel-body">
                    <div class="the-price">
                        <h1>FREE</h1>
                        <span class="mini">Runs for 12 Hours
                        <a href="#" class="btn btn-block btn-success" role="button">Activate</a>    
                    </span></div>
                    <table class="table table-free">
                        <tbody><tr>
                            <td>
                               <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Option 1</p>
                            </td>
                        </tr>
                        <tr class="active">
                            <td>
                                <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Option 2</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Option 3</p>
                            </td>
                        </tr>
                        <tr class="active">
                            <td>
                                <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Option 4</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Option 5</p>
                            </td>
                        </tr>
                        <tr class="active">
                            <td>
                                <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Option 6</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Option 7</p>
                            </td>
                        </tr>
                    </tbody></table>
                </div>
                <div class="panel-footer">
                   <span class="more"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More information!</span>
                <div class="info well">
                   <span> More information! More information! More information! More information! More information! More information! More information! More information! More information! More information! More information! More information! More information! More information! More information! More information!</span>
              </div>

              </div>
            </div>
        </div>