vue-鼠标hover标题展开内容区域效果

前言

---

之所以写这个是因为最近的项目需求中要实现一个pc端大型电商首屏选择商品分类效果，需求就是hover左侧区域展示右侧区域的内容，看到这个需求第一想法就是两者写在一个容器内，用定位把布局写好，后来仔细一想其实也可以不用这样，就自己写了一个。

其实这个功能就是两个不在同一父级的容器hover一个容器的内容展示相对应的另一个容器的内容。主要是使用index下标做的内容展示准确

项目框架是vue+ssr+nuxt

先看一下我完成的效果图

这个就是hover标题栏的标题是展示对应的内容，但是两者不在同一容器内。

话不多说，直接上代码

<template>
  <div class="revisionCategory">
    <div class="Category_boxshow">
      <!-- 左侧的一级分类菜单 -->
      <div class="category_left_first">
        <div
          class="left_first_lists"
          v-for="(item, index) in categoriesList"
          :key="index"
          :class="[index == is_show_index ? 'hoverBackground' : 'nohoverback']"
          @mouseenter.stop.prevent="getinOrderLis(index)"
        >
          <div
            class="red_center_line"
            :class="[
              index == is_show_index ? 'red_hover_line' : 'red_nohover_line',
            ]"
          ></div>
          <div class="class_icon">
            <img
              :src="item.icon"