$(this)用法

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script>
        $(document).ready(function() {
            
            $(this).mouseover(function() {
                $(this).css('height', '200px');    
            });
            $(this).mouseleave(function() {
                $(this).css('height', '100px');
            });
        });
    </script>
</head>

<body>
    <div id="div0">
    <div class="box" id="div1"></div>
    <div class="box" id="div2"></div>
    <div class="box" id="div3"></div>
    <div class="box" id="div4"></div>
    <div class="box" id="div5"></div>
    <div class="box" id="div6"></div>
    <div class="box" id="div7"></div>
    <div class="box" id="div8"></div>
    <div class="box" id="div9"></div>
    <div class="box" id="div10"></div>
    </div>
</body>

这里的为什么无法实现鼠标经过改变指定div的大小？

css :hover 不是更简单

在 ready 事件中，this 是指 document，所以你的事件并没有绑定在 div 上，而是绑定在 document 上。按你的意思，应该是这样

$(document).ready(function() {
    $("div.box")
        .mouseover(function() {
            $(this).css("height", "200px");
        })
        .mouseleave(function() {
            $(this).css("height", "100px");
        });
});

https://jsfiddle.net/0cn8xu1p/

【热门文章】