hover时显示元素 点击item后跳转到别的页面 并且隐藏元素

可以通过CSS的:hover伪类来实现鼠标悬浮时显示元素的效果，然后在点击item时跳转到别的页面并且隐藏元素。

具体实现步骤如下：

1. 在需要显示的元素上添加一个CSS类名，例如：

<div class="hover-show">鼠标悬浮时显示的元素</div>

2. 使用CSS的:hover伪类来实现鼠标悬浮时显示元素的效果，例如：

.hover-show {
  display: none;
}

.hover-show:hover {
  display: block;
}

在上面的代码中，当元素被鼠标悬浮时，将其样式的 `display` 属性设置为 `block`，从而显示元素的效果。

3. 在 item 上添加一个点击事件，并在事件处理程序中使用 Nuxt.js 的 `<nuxt-link>` 组件来实现页面跳转，并在跳转前隐藏元素，例如：

<template>
  <div>
    <div class="hover-show">鼠标悬浮时显示的元素</div>
    <div @click="handleClick">点击跳转到别的页面</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$refs.hideElement.style.display = 'none';
      this.$router.push('/other-page');
    }
  }
};
</script>

在上面的代码中，当 item 被点击时，将元素的样式的 `display` 属性设置为 `none`，从而隐藏元素的效果，然后使用 `$router.push()` 方法来实现页面跳转。需要注意的是，如果需要在多个页面中实现这个效果，需要在每个页面中都添加相应的代码。