将鼠标悬停在一个上但影响另一个 CSS
Posted
技术标签:
【中文标题】将鼠标悬停在一个上但影响另一个 CSS【英文标题】：hover over one but affect another css 【发布时间】：2021-04-04 06:15:56 【问题描述】：我的问题很简单，我没有找到直接的答案，所以在这里：我有两个框，我想悬停第一个但影响第二个（悬停第一个时，第二个应该这样做（转换：比例（1.2）； 过渡：所有 0.9 秒缓进出；））。 是否可以使用 css 或也需要 javascript？ 我的代码：
<!DOCTYPE html>
<html>
<head>
<style>
div
display: inline-block;
margin: 30px;
font-weight: bold;
.a
width: 100px;
height: 100px;
border : 1px solid black;
line-height: 100px;
text-align: center;
.c
width: 100px;
height: 100px;
border : 1px solid black;
line-height: 100px;
text-align: center;
.d:hover
transform: scale(1.2);
transition: all 0.9s ease-in-out;
</style>
</head>
<body>
<div class="a b">Hover me</div>
<div class="c d">Affect me</div>
</body>
</html>【问题讨论】：
【参考方案1】：使用 css，您应该可以将 + 用于直接兄弟或将 ~ 用于间接兄弟
.b:hover + .c
transform: scale(1.2);
transition: all 0.9s ease-in-out;
【讨论】：
【参考方案2】：您应该使用组合选择器。
div
display: inline-block;
margin: 30px;
font-weight: bold;
.a
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 100px;
text-align: center;
.c
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 100px;
text-align: center;
.a:hover + .d
transform: scale(1.2);
transition: all 0.9s ease-in-out;
<div class="a b">Hover me</div>
<div class="c d">Affect me</div>【讨论】：
以上是关于将鼠标悬停在一个上但影响另一个 CSS的主要内容，如果未能解决你的问题，请参考以下文章
将鼠标悬停在图像上时需要 CSS 效果，以获取另一个图像和/或文本以显示在其上方