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

【问题标题】：How to add hover effects on different elements from the same div如何在同一div的不同元素上添加悬停效果
【发布时间】：2021-04-04 15:15:24
【问题描述】：

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

我有一个包含 3 个元素的 div：一个图像、一个按钮和一个段落，我已经对 div 进行了缩放效果以更改整个容器的大小，但我还想更改将鼠标悬停在 div 上的任何位置时的按钮，不一定在按钮上。这同样适用于图像。

div：

<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;
    }

【问题讨论】：

标签： html css hover effects

【解决方案1】：

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>

会的。

【讨论】：

【解决方案2】：

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

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

一个例子：

.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>

【讨论】：