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

时间：2017-01-03 11:52:52

标签： javascript jquery html css twitter-bootstrap

我有通过Bootstrap开发的定价表：

http://www.bootply.com/VyHsJBDoNc

如何在跨度上悬停（+更多信息！）会在附加的屏幕截图中显示额外的信息。

提前谢谢！

enter image description here

3 个答案:

答案 0 :(得分：1)

试试这个 -

CSS： - 

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

.moreinfo{
position: absolute;
    top: -37px;
    background: #23b070;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
}
.panel-footer{
position:relative;
}

.moreinfo:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #23b070;
    bottom: -10px;
    z-index: 1;
    left: 0;
    right: 0;
    margin: 0 auto;

    }

HTML如下

<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">
             <div class="moreinfo" style"display:none;">hi</div>
               <span class="more"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More information!</span>
          </div>
        </div>
    </div>

Javascript： - 

$('.more').mouseover(function(){
   $('.moreinfo').show()
})

$('.more').mouseleave(function(){
   $('.moreinfo').hide()
})

答案 1 :(得分：1)

有几种可能的解决方案。 如果要使用Bootstrap组件，可以使用popover component。

否则，你可以使用一些jQuery事件处理程序和函数吗？

$(".more").hover(
  // On Hover
  function() {
    // Show the information div
    // $("#moreInfo").show();
  }, 
  // On Leave
  function() {
    // Hide the information div
    // $("#moreInfo").hide();
  }
);

答案 2 :(得分：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>

相关问题
最新问题