鼠标移上去，弹出说明框，移开则消失

1、设置css样式：

 <style>
    .rule-popup-box{display: none; position: absolute; top: 0; right: 0; z-index: 100; width: 380px; padding: 20px; background-color: #fff; border: 3px solid #c4c4c4; }
    .rule-popup-box .tit { border-bottom: 1px solid #dedede; }
    .rule-popup-box .tit h3 { padding-bottom: 10px; color: #333; font-size: 16px; }
    .rule-popup-box .con { padding: 10px 0 0 0; }
    .rule-popup-box .con ul { padding-bottom: 5px; }
    .rule-popup-box .con ul li { color: #333; padding: 2px 0 2px 20px; text-indent: -20px;list-style:none;}

    </style>

2、设计html代码：

<!-- 规则弹框 -->
<div class="rule-link-wrap" style="display: inline-block;">
    <a href="#rule-popup-box-01" class="d-rule-link rule-link">模板说明</a>
    <div class="rule-popup-box" id="rule-popup-box-01">
        <div class="tit">
            <h3>模板说明</h3>
        </div>
        <div class="con">
            <ul>
                <li>1、文件名：主题名称+基日+基点，中间用"-"隔开。（如：主题名称-20160105-1000）</li>
                <li>2、excel标题：表有四个属性标题（即证券代码，证券简称，开始日期，结束日期）；这4个顺序不能颠倒。日期没有，则不填。</li>
                <li>3、日期格式：年月日之间用"-"隔开。（如：2016-06-12）</li>
            </ul>

        </div>
    </div>
</div>
<!-- 规则弹框结束 -->

3、js代码：

//模板弹框说明
 $(".rule-link-wrap").hover(function() {
  var href=$(this).attr('href');
  $(this).find(".rule-popup-box").show();
}, function() {
  $(this).find(".rule-popup-box").hide();
});