Question

我有这个代码，当一个人悬停在文本上时，它应该滑入div但是它不起作用可以有人请检查并指出原因是什么

<script type="text/javascript" src="/js/jquery-1.9.1.min.js" ></script>
<div class="good_main">
<div class="more_save_box">
        <div class="top_wholesaleInquiry_button_20161213 more_save">
            Wholesale Inquiry
        </div>
        <div class="more_save_tips" style="display: none;">
            <span class="arrow_a"><i><i></i></i></span>
            <h3>Bulk Buy Discounts</h3>
            Order 3 or more and enjoy the savings. Bulk prices will be shown in the shopping cart.
            <table cellspacing="0" cellpadding="0" width="100%" border="1">
                <tbody><tr>
                    <th>Qty (unit)</th>
                    <th>1</th>
                    <th>3</th>
                    <th>10</th>
                    <th>30</th>
                    <th>100</th>
                </tr>
                <tr class="has">
                    <td>Price <span>US$</span></td>
                <td>12.99</td><td>12.53</td><td>12.36</td><td>12.21</td><td>12.04</td></tr>
            </tbody></table>
            <span class="top_wholesaleInquiry_button_20161213" id="more_save_tips_contact">Looking for more wholesale prices, <a rel="nofollow" target="_blank" href="/Contact-Us_hi558?products_id=975808">Wholesale Inquiry</a></span>

        </div>
    </div>
  </div>
  <script type="text/javascript">
$(".good_main .more_save_box").hover(
    function(){
        $(".good_main .more_save_tips").stop().slideDown(); 
    },
    function(){
        $(".good_main .more_save_tips").hide(); 
    });
</script>

Answer 1

首先，您将jQuery代码放在document.ready函数中，如下所示：

$(document).ready(function(){
  $(".good_main .more_save_box").hover(
    function(){
        $(".good_main .more_save_tips").stop().slideDown(); 
    },
    function(){
        $(".good_main .more_save_tips").hide(); 
    });
});

Answer 2

当dom为ready时加载jquery代码时，您的代码有效。

$(document).ready(function(){
    $(".good_main .more_save_box").hover(
    function(){
        $(".good_main .more_save_tips").stop().slideDown(); 
    },
    function(){
        $(".good_main .more_save_tips").hide(); 
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="good_main">
<div class="more_save_box">
        <div class="top_wholesaleInquiry_button_20161213 more_save">
            Wholesale Inquiry
        </div>
        <div class="more_save_tips" style="display: none;">
            <span class="arrow_a"><i><i></i></i></span>
            <h3>Bulk Buy Discounts</h3>
            Order 3 or more and enjoy the savings. Bulk prices will be shown in the shopping cart.
            <table cellspacing="0" cellpadding="0" width="100%" border="1">
                <tbody><tr>
                    <th>Qty (unit)</th>
                    <th>1</th>
                    <th>3</th>
                    <th>10</th>
                    <th>30</th>
                    <th>100</th>
                </tr>
                <tr class="has">
                    <td>Price <span>US$</span></td>
                <td>12.99</td><td>12.53</td><td>12.36</td><td>12.21</td><td>12.04</td></tr>
            </tbody></table>
            <span class="top_wholesaleInquiry_button_20161213" id="more_save_tips_contact">Looking for more wholesale prices, <a rel="nofollow" target="_blank" href="/Contact-Us_hi558?products_id=975808">Wholesale Inquiry</a></span>

        </div>
    </div>
  </div>

鼠标悬停上的JavaScript SlideDown不起作用

2 个答案: