如何在同一div中的不同元素上添加悬停效果

Question

大家好，这是我第一次在这里发帖。我的问题是我如何添加不同的悬停效果从一个div的元素。

我有一个包含3个元素的div：一个img，一个按钮和一个段落，我已经在div上有一个缩放效果来改变整个容器的大小，但我也想改变按钮的颜色，当悬停在div的任何地方时，不一定是在按钮上。同样适用于IMG。

分区：

<div class="float_tab">
      <img src="./NY_2.jpeg" alt="imagine"/>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam vel ipsum autem, sed aut sunt repellat laudantium aspernatur fugiat dolorem.</p>
      <input class="btn" value="Enter" type="button">
    </div>

程式化

.float_tab:hover{
  transform: scale(1.3);
}
.float_tab {
  width: 210px;
  height: 300px;
  background-color: rgb(128, 177, 220, 0.7);
  border-radius: 10px;
  display: inline-block;
  position: relative;
  top:-1500px;
  left: 570px;
  margin-right: 100px;
  transition: 1s;

}
img {
  width: 210px;
  height: 120px;
  border-radius: 5px;
  opacity: 0.8;

}

p {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}


.btn {
  height: 20px;
  width: 90px;
  margin-left: 60px;
  margin-top: 10px;
  background-color: #80b1dc;
  align-items: center;
  border-radius: 5px;
}

Answer 1

可以为子元素添加新样式：

.float_tab:hover input, img {
  background-color: lightgreen;
}

一个例子：

null

css prettyprint-override">.float_tab:hover input, img{
  background-color: lightgreen;
}

 <div class="float_tab">
    <img alt="foo image" alt="imagine" />
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam vel ipsum autem, sed aut sunt repellat
      laudantium aspernatur fugiat dolorem.</p>
    <input class="btn" value="Enter" type="button">
  </div>

Answer 2

css将只对匹配元素应用效果，因此：

<script>
    .float_tab:hover img{
        //css here
    }
    
    .float_tab:hover .btn{
        //css here
    }
</script>

<div class="float_tab">
      <img src="./NY_2.jpeg" alt="imagine"/>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam vel ipsum autem, sed aut sunt repellat laudantium aspernatur fugiat dolorem.</p>
      <input class="btn" value="Enter" type="button">
</div>

就行了。