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

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

javascript jquery html css

Javascript CSS只在鼠标悬停时加载，为什么？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,首次加载此页面时，在用户将鼠标指针悬停在div元素上之前，根本没有CSS格式 <!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"></sc

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

<!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>


纽扣魔术
div{
左边距：100px；
高度：30px；
宽度：100px；
边界半径：5px；
背景色：#69D2E7；
文本对齐：居中；
颜色：#FFFFFF；
字体系列：Verdana、Arial、无衬线字体；
字体大小：10px；
溢出：隐藏；
单词包装：打断单词；
显示：内联；
}
$（文档）.ready（函数（）{
$（'div'）.mouseenter（函数（）{
$（此）。设置动画({
高度：'+=68px'
}“快”）；
});
$（'div'）.mouseleave（函数（）{
$（此）。设置动画({
高度：'-=68px'
}); 
});
});

点击我



点击我



点击我



点击我

您的位置和填充规则无效。这可能会导致某些浏览器出现问题。使用

/*[某些代码]*/

删除或注释掉

这是否解决了问题？

您的div具有

display:inline

属性。将其替换为

显示：内联块

。它应该能解决你的问题

我想这就是你想要的：

除此之外，它只在悬停时起作用的原因是，浏览器确定悬停后它应该是

内联块

，而不是

内联块

，并将此样式指定给元素。GMambaG在上面解释了这一点。您还包括了两次jQuery。

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