Javascript 如何在父项悬停时淡入子项div

我有一个div，它的类名为

ordershape

，它包含另一个div

fad res

我希望当我将鼠标悬停在特定的

ordershape

上时，我希望显示相应的

fad res

，我将鼠标悬停在其父div上，而其他div必须隐藏

<div class="ordershape">
    <div class="fad-res">1</div>
</div>
<div class="ordershape">
    <div class="fad-res">2</div>
</div>
<div class="ordershape">
    <div class="fad-res">3</div>
</div>

1.
2.
3.

您的HTML无效，因为您尚未使用类

ordershape

没有理由为此使用jquery，CSS可以轻松实现这一点：

.ordershape:hover .fad-res{
  display:block;
}

演示CSS

.fad res{
显示：无；
}
.订单形状{
高度：30px；
宽度：30px；
背景颜色：黄色；
}
.ordershape:hover.fad res{
显示：块；
}

1
2.
3.

不要为此使用javascript-使用

：悬停

选择器，依赖CSS

转换

和

不透明度

属性

.fad res{
-webkit转换：不透明度。3s易于输入输出；
过渡：不透明度。3秒轻松进出；
不透明度：0；
背景：#555555；
高度：60px；
宽度：100px；
}
.订单形状{
背景：#f6f6f6；
高度：100px；
宽度：100px；
浮动：左；
右边距：2px；
}
.ordershape:hover.fad res{
不透明度：1；
}

1.
2.
3.

那么，您可以用这种方式尝试

jquery

版本

$（“.ordershape”）.hover（函数（）{
$（this.find（“.fad res”）.toggle（）；
})

.fad res{
显示：无；
}
.订单形状{
宽度：20px；
高度：20px
}

1.
2.
3.

请参阅此链接：->这可能有助于您解决此问题可能重复的