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

Question

大家好，这是我第一次在这里发帖。我的问题是如何在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;
}

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

会的。

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