关于嵌套div中图片缩放的问题

Question

问题描述

如图，外面是一个大的div，里面白色部分是一个嵌套在大div中的小div，我一开始使用:hover，在鼠标移入大div的时候让图片放大，移出大div的时候图片恢复原状。但当鼠标经过小div的时候，图片就缩小了。然后又使用鼠标的移入移出事件，当鼠标移入移出小div的时候放大同样的倍数，效果就实现了。但要是有2个这样的项，我鼠标移入到其中一个中，另一个样式也会跟着变化，求教大佬，这应该怎么解决

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

 <div
      class="recomend-course"
      v-for="project in courses"
      :key="project.package_id"
      @click="toProjectHomePage(project.package_id)"
    >
      <div class="recomend-series-img">
        <img
          src="http://edu-image.nosdn.127.net/67BF4C9EE4356C581BBBD45CE632FC19.png?imageView&quality=100&thumbnail=286y170&type=webp"
          alt="image"
          @mouseenter="mouseEnter"
          @mouseleave="mouseLeave"
          :style="active"
        />
      </div>
      <div class="recomend-series-container"
        @mouseenter="mouseEnter2"
        @mouseleave="mouseLeave2">
        <div class="recomend-series-title">
          <h3>{{project.title2}}</h3>
        </div>
        <div class="recomend-series-des">
          <p>{{project.title1}}</p>
        </div>
      </div>
    </div>
    
    // mouseXxx方法处理图片的缩放
    mouseEnter() {
      this.active = "transform: scale(1.2);";
    },
    mouseLeave() {
      this.active = "transform: scale(1.0);";
    },
    mouseEnter2() {
      this.active = "transform: scale(1.2);";
    },
    mouseLeave2() {
      this.active = "transform: scale(1.2);";
    }

Answer 1

主要代码

<div class="content">
      <img src="http://edu-image.nosdn.127.net/67BF4C9EE4356C581BBBD45CE632FC19.png?imageView&quality=100&thumbnail=286y170&type=webp"/>
      <div class="title">
        <h1>大标题</h1>
        <h2>小标题</h2>
      </div>
    </div>

.content:hover > img{
    transform : scale(1.2);
}

Answer 2

试试mouseover 和mouseout

Answer 3

可以试试冒泡，点透原理，把点击事件注册到小的div上