鼠标悬浮切换图片

(nuxt.js) 鼠标悬浮切换图片（css）
html部分：

<section class="new-recommendedRing" >
  <div v-if="language == 'en_US'" class="title-en">{
   {
    $t(`${
     lang}.RecommendedRing`) }}</div>
  <div v-else class="title">{
   {
    $t(`${
     lang}.RecommendedRing`) }}</div>
  <div class="content">
    <div class="product" v-for="(item, index) in newRecommendedRing" :key="index">
      <nuxt-link :to="item.to || ''" target="_blank">
        <div class="product-image">
          <img class="main-image" :src="item.proImage" />
          <img class="sub-image" :src="item.subImage"/>
        </div>
        <div class="name">{
   {
   item.title}}</div>
        <div class="more">
          <span>MORE</span>
        </div>
      &l