如何使用JavaScript（JS）或jQuery (JQ) 实现当鼠标悬停在HTML ul 元素中的 li 子元素时，显示包含项目名称和合同金额的小卡片效果？

在 JavaScript 或 jQuery 中，你可以通过监听 `mouseover` 和 `mouseout` 事件来实现这个效果。首先，假设你的 HTML 结构类似于这样：

<ul id="list">
  <li class="item" data-name="项目A" data-amount="5000">项目A</li>
  <!-- 更多 li 标签... -->
</ul>

<div class="card-container hidden">
  <!-- 小卡片模板 -->
  <div class="card">
    <h3>项目名称</h3>
    <p>合同金额</p>
  </div>
</div>

接下来，你可以编写如下的 jQuery 代码：

$(document).ready(function() {
  // 获取小卡片容器并将其默认隐藏
  var cardContainer = $('.card-container');
  cardContainer.hide();

  // 监听列表项的 hover 事件
  $('#list li').hover(
    function() { // 鼠标移入
      var $this = $(this);
      var name = $this.data('name');
      var amount = $this.data('amount');

      // 创建一个新的卡片实例，并动态填充内容
      var card = $('<div class="card"></div>');
      card.append('<h3>' + name + '</h3><p>金额: ' + amount + '</p>');

      // 显示卡片
      cardContainer.show().append(card);
    },
    function() { // 鼠标移出
      // 移除当前显示的卡片，将它返回到容器中
      $('.card', cardContainer).remove();
      cardContainer.hide();
    }
  );
});

这段代码会在用户鼠标悬停在 `li` 上时创建一个新的卡片，显示项目的名称和金额；当鼠标离开 `li` 时，会隐藏卡片。注意这里使用了 `.hide()` 和 `.show()` 来控制卡片的可见性，`.data()` 方法用于获取每个 `li` 的数据属性。