用vue，css，js写一个侧边栏 鼠标悬停左侧菜单栏，右侧内容框显示对应内容

首先，我们需要在HTML中创建侧边栏和内容框的结构：

<div id="app">
  <div class="sidebar">
    <ul>
      <li @mouseover="showContent(1)">菜单1</li>
      <li @mouseover="showContent(2)">菜单2</li>
      <li @mouseover="showContent(3)">菜单3</li>
    </ul>
  </div>
  <div class="content">
    <div v-show="activeMenu === 1">
      内容1
    </div>
    <div v-show="activeMenu === 2">
      内容2
    </div>
    <div v-show="activeMenu === 3">
      内容3
    </div>
  </div>
</div>

我们使用了Vue的指令v-show来控制内容框的显示和隐藏。我们还给每个菜单项绑定了mouseover事件，当鼠标悬停在菜单项上时，触发showContent方法。

接下来，我们需要在Vue实例中定义数据和方法：

new Vue({
  el: '#app',
  data: {
    activeMenu: 0
  },
  methods: {
    showContent(index) {
      this.activeMenu = index;
    }
  }
})

我们定义了一个名为activeMenu的数据，用来记录当前激活的菜单项，初始值为0。我们还定义了一个名为showContent的方法，用来设置当前激活的菜单项。

最后，我们需要添加一些CSS样式来美化侧边栏和内容框：

.sidebar {
  width: 200px;
  height: 100%;
  background-color: #333;
  color: #fff;
  float: left;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  padding: 10px;
  cursor: pointer;
}

.content {
  margin-left: 200px;
  padding: 20px;
}

.content div {
  display: none;
  font-size: 24px;
  font-weight: bold;
}

.content div:first-child {
  display: block;
}

我们设置了侧边栏的宽度、背景颜色和字体颜色，并使其浮动到左侧。我们还设置了菜单项的样式，包括内边距和鼠标指针形状。对于内容框，我们设置了左边距和内边距，并将所有内容的显示状态设置为隐藏。最后，我们使用CSS伪类选择器:first-child将第一个内容框的显示状态设置为显示。

现在，我们就可以运行这个应用程序并测试它了。当鼠标悬停在菜单项上时，对应的内容框将显示出来。