给一个完整的具体示例

假设我们有一个简单的列表项，每个列表项代表一个人物，并且我们想要实现当鼠标悬停在每个列表项上时，人物会淡入显示其详细信息，离开时再淡出隐藏。这个效果可以通过HTML、CSS和JavaScript结合来实现：

HTML:

<ul class="characters">
  <li class="character" data-id="1">人物1</li>
  <li class="character" data-id="2">人物2</li>
  <!-- 更多人物 -->
</ul>

<div class="details hidden">
  <p id="detail-1">人物1详情...</p>
  <p id="detail-2">人物2详情...</p>
  <!-- 更多详情对应数据id -->
</div>

CSS:

.character {
  position: relative;
  overflow: hidden;
  transition: opacity .3s ease;
}

.character:hover .details {
  opacity: 1;
}

.details {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  opacity: 0;
  display: none;
  transition: opacity .3s ease;
}

.hidden {
  display: none;
}

JavaScript (假设用了jQuery简化):

$(document).ready(function() {
  $('.character').hover(function() {
    var detailId = $(this).data('id');
    $('#detail-' + detailId).fadeIn();
  }, function() {
    var detailId = $(this).data('id');
    $('#detail-' + detailId).fadeOut();
  });
});

在这个例子中，当鼠标悬停在`.character`上时，对应的`.details`元素就会逐渐显示（`fadeIn`），鼠标移开时则相反（`fadeOut`）。注意，这里假设`.character`和`.details`元素之间有一一对应的关系，通过`data-id`关联它们的详细信息。