一个div中左边是ul列表，ul列表中有九个li选项，右边是li选项对应的图片图片每次只显示一个，鼠标悬停的时候显示对应的图片。div显示边框

在一个HTML页面上，你可以创建这样的布局，使用`<div>`包裹内容，并结合CSS来实现效果。首先，设置一个基本的结构：

<div class="image-container">
  <ul class="list">
    <!-- 九个li元素 -->
    <li>
      <a href="#" class="item-link">选项1</a>
      <img src="图片1.jpg" alt="图片1" class="hidden-image">
    </li>
    <!-- 其他八个li... -->
  </ul>
  <div class="image-preview"></div>
</div>

然后在CSS中，隐藏所有图片并设置鼠标悬浮时的效果：

.image-container {
  display: flex;
  border: 1px solid #ccc; /* 设置边框 */
  overflow: hidden;
}

.list {
  width: 50%;
}

.hidden-image {
  display: none;
}

.item-link:hover + .hidden-image {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  /* 需要调整宽度、高度和其他样式适应图片 */
}

在这个例子中，`.item-link`是一个链接元素，它旁边隐藏着一张图片(`.hidden-image`)。当用户将鼠标悬停在链接上时，对应的图片会从`.hidden-image`类变为可见，定位到右下角。