Question

首次加载此页面时，根本没有CSS格式，直到用户将鼠标指针悬停在div元素上。

<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">
        <title>Button Magic</title>

        <style type="text/css">
            div {
                margin-left: 100px;
                height: 30px;
                width: 100px;
                border-radius: 5px;
                background-color: #69D2E7;
                text-align: center;
                color: #FFFFFF;
                font-family: Verdana, Arial, Sans-Serif;
                font-size: 10px;
                overflow:hidden; 
                word-wrap:break-word;
                display: inline;

            }

        </style>

        <script type="text/javascript">
            $(document).ready(function() {
                $('div').mouseenter(function() {
                    $(this).animate({
                        height: '+=68px'
                    }, "fast");
                });

                $('div').mouseleave(function() {
                    $(this).animate({
                        height: '-=68px'
                    }); 
                });
            });
        </script>

    </head>
<body>
     <div><br/>Click Me! <br><br><img src="https://i.imgur.com/WUFGJqR.gif?1" width="75" height="47" border="0" usemap="#map"></div>
     <div><br/>Click Me! <br><br><img src="https://i.imgur.com/OxHKeTw.gif" width="75" height="47" border="0" usemap="#map" /></div>
     <div><br/>Click Me! <br><br><img src="https://i.imgur.com/ugukhx5.gif" width="75" height="47" border="0" usemap="#map" /></div>
     <div><br/>Click Me! <br><br><img src="https://i.imgur.com/01xzeLK.gif" width="75" height="47" border="0" usemap="#map" /></div>

</body>
</html>

Answer 1

你的div有display:inline属性。。用display:inline-block替换它。它应该解决你的问题。

Answer 2

我认为这正是您所寻找的：http://jsfiddle.net/w9sbj0ae/

 div {
     margin-left: 100px;
     height: 30px;
     width: 100px;
     border-radius: 5px;
     background: #69D2E7;
     text-align: center;
     color: #FFFFFF;
     font-family: Verdana, Arial, Sans-Serif;
     font-size: 10px;
     overflow:hidden;
     word-wrap:break-word;
     display: inline-block;
 }

Answer 3

您的排名和填充规则无效。这可能会导致某些浏览器出现问题。使用/* [some code] */删除或注释掉。

这是否解决了这个问题？

CSS只在鼠标悬停时加载，为什么？

3 个答案: