js鼠标移入第i个li就显示第i个div,默认不显示

您可以使用JavaScript来实现这一效果，具体步骤如下：

1. 在HTML中，定义一个包含多个li和div的容器。

<ul id="list">
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
</ul>

<div id="content">
  <div>内容1</div>
  <div>内容2</div>
  <div>内容3</div>
</div>

2. 使用CSS隐藏所有的div。

#content div {
  display: none;
}

3. 使用JavaScript为每个li元素添加鼠标移入事件，并在事件处理程序中显示对应的div。

var listItems = document.querySelectorAll('#list li');
var contentItems = document.querySelectorAll('#content div');

for (var i = 0; i < listItems.length; i++) {
  listItems[i].addEventListener('mouseover', function(event) {
    // 获取当前li的索引
    var index = Array.prototype.indexOf.call(listItems, event.target);
    
    // 显示对应的div
    contentItems[index].style.display = 'block';
  });
}

4. 使用JavaScript为每个li元素添加鼠标移出事件，并在事件处理程序中隐藏对应的div。

for (var i = 0; i < listItems.length; i++) {
  listItems[i].addEventListener('mouseout', function(event) {
    // 获取当前li的索引
    var index = Array.prototype.indexOf.call(listItems, event.target);
    
    // 隐藏对应的div
    contentItems[index].style.display = 'none';
  });
}

这样，当鼠标移入每个li元素时，对应的div将显示出来，移出时则隐藏。同时，由于在CSS中将所有的div都隐藏了，所以默认不会显示。