html - 如何修复影响容器中元素的悬停

Question

当我悬停包含图像的按钮/ block 时，我需要缩放图像，但它不起作用。

如果我只将鼠标悬停在图像上，它会完美缩放，但当我尝试将鼠标悬停在 block 上时，它不会影响图像。

所以它会像:悬停按钮 - 图像动画播放。

我希望悬停 block /按钮会影响图像

.cont {}

.btn-1 {
  font-family: 'Exo 2', sans-serif;
  font-size: 18px;
  width: 350px;
  height: 100px;
  background-color: #f790b0;
  margin-bottom: 5px;
  border: none;
}

.square {
  width: 100px;
  height: 100px;
  background-color: #f58;
  position: absolute;
}

img {
  z-index: 4;
  position: absolute;
  width: 60px;
  height: 60px;
  padding: 20px;
  transition: 0.7s;
}

.btn-1:hover~img {
  transform: scale(1.2, 0.5);
}

span {
  margin-left: 20px;
}

<link href="https://fonts.googleapis.com/css?family=Exo+2:400,700&display=swap&subset=cyrillic" rel="stylesheet">
<div class="cont">
  <div class="block">

    <div class="square"><img src="https://sandtonchronicle.co.za/wp-content/uploads/sites/33/2015/01/Facebook-logo-thum_621307002-423x317.jpg"></div>
    <button class="btn-1">
                Избранное
            </button>
  </div>
</div>

Answer 1

首先你必须移动按钮和方 block 。因为用css，不能选中前面的元素。那么css应该是这样的。 .btn-1:hover~.square img 然后在使用row-reverse之前拍了张照片。

.btn-1 {
  font-family: 'Exo 2', sans-serif;
  font-size: 18px;
  width: 350px;
  height: 100px;
  background-color: #f790b0;
  margin-bottom: 5px;
  border: none;
}

.block {
  display: inline-flex;
  flex-direction: row-reverse;
}

.square {
  width: 100px;
  height: 100px;
  background-color: #f58;
}

img {
  z-index: 4;
  position: absolute;
  width: 60px;
  height: 60px;
  padding: 20px;
  transition: 0.7s;
}

.btn-1:hover~.square img {
  transform: scale(1.2, 0.5);
}

span {
  margin-left: 20px;
}

<div class="cont">
  <div class="block">
    <button class="btn-1">
        Button
     </button>
    <div class="square"><img src="https://picsum.photos/200"></div>
  </div>
</div>