jquery hover 使用案列

下面是一个 jQuery hover 的使用案例：

HTML 代码：

<div class="box">
  <h2>这是一个标题</h2>
  <p>这是一段文字</p>
</div>

CSS 代码：

.box {
  width: 200px;
  height: 200px;
  background-color: #eee;
  padding: 20px;
  margin: 20px;
}

.box:hover {
  background-color: #ccc;
}

.box h2 {
  color: #333;
}

.box p {
  display: none;
}

.box:hover p {
  display: block;
}

jQuery 代码：

$(document).ready(function() {
  $('.box').hover(function() {
    $(this).find('h2').css('color', '#fff');
  }, function() {
    $(this).find('h2').css('color', '#333');
  });
});

这个示例中，当鼠标悬停在 `.box` 元素上时，它的背景颜色会变为浅灰色，同时，它里面的 `<h2>` 元素的颜色也会从黑色变为白色。另外，这个示例还使用了 jQuery 的 `hover()` 函数来控制当鼠标悬停在 `.box` 元素上时，它里面的 `<p>` 元素会显示出来。