Css 将鼠标悬停在父对象上可保持子对象悬停效果，可能吗？

我有以下html：

<div class="parent">
  <div class="sibling" data-modal=".child"></div>
  <div class="child"></div>
</div>

这可能吗

是的

将悬停条件添加到父项

.parent{
位置：相对位置；
宽度：250px；
高度：200px；
背景色：#f1f1；
}
.兄弟姐妹{
宽度：100px；
高度：30px；
填充：6px；
边框：4倍纯红；
}
.parent:hover.sibling，/*此处*/
.兄弟姐妹：悬停{
边框颜色：绿色；
}
.孩子{
位置：绝对位置；
宽度：200px；
高度：50px；
顶部：70像素；
背景：蓝色；
显示：无；
}

是

将悬停条件添加到父项

.parent{
位置：相对位置；
宽度：250px；
高度：200px；
背景色：#f1f1；
}
.兄弟姐妹{
宽度：100px；
高度：30px；
填充：6px；
边框：4倍纯红；
}
.parent:hover.sibling，/*此处*/
.兄弟姐妹：悬停{
边框颜色：绿色；
}
.孩子{
位置：绝对位置；
宽度：200px；
高度：50px；
顶部：70像素；
背景：蓝色；
显示：无；
}

---

我不太确定是否正确，但这是您需要的吗

.parent{
位置：相对位置；
宽度：1000px；
高度：200px；
}
.兄弟姐妹{
宽度：100px；
高度：30px；
填充：8px；
边框：1px纯红；
}
.兄弟姐妹：悬停{
边框颜色：蓝色；
}
.sibling:悬停+.child{
显示：块；
}
.孩子{
位置：绝对位置；
宽度：200px；
高度：50px；
顶部：60px；
背景：蓝色；
显示：无；
}

测试

我不太确定是否正确，但这是您需要的吗

.parent{
位置：相对位置；
宽度：1000px；
高度：200px；
}
.兄弟姐妹{
宽度：100px；
高度：30px；
填充：8px；
边框：1px纯红；
}
.兄弟姐妹：悬停{
边框颜色：蓝色；
}
.sibling:悬停+.child{
显示：块；
}
.孩子{
位置：绝对位置；
宽度：200px；
高度：50px；
顶部：60px；
背景：蓝色；
显示：无；
}

测试

是，这是可能的

$（“.parent”）.mouseenter（函数（）{
var divName=$（this.data（'modal'）；
$（divName）.fadeIn（'fast'）.animate({
“顶部”：“30px”
}，{duration:'slow'，queue:false}，function（）{/*动画完成*/}）；
});
.parent{
位置：相对位置；
宽度：1000px；
高度：200px；
}
.parent:hover.sibling{边框颜色：#000；}
.兄弟姐妹{
宽度：100px；
高度：30px；
填充：8px；
边框：1px纯红；
}
.孩子{
位置：绝对位置；
宽度：200px；
高度：50px；
顶部：60px；
背景：蓝色；
显示：无；
}

是，这是可能的


$（“.parent”）.mouseenter（函数（）{
var divName=$（this.data（'modal'）；
$（divName）.fadeIn（'fast'）.animate({
“顶部”：“30px”
}，{duration:'slow'，queue:false}，function（）{/*动画完成*/}）；
});
.parent{
位置：相对位置；
宽度：1000px；
高度：200px；
}
.parent:hover.sibling{边框颜色：#000；}
.兄弟姐妹{
宽度：100px；
高度：30px；
填充：8px；
边框：1px纯红；
}
.孩子{
位置：绝对位置；
宽度：200px；
高度：50px；
顶部：60px；
背景：蓝色；
显示：无；
}
您不需要javascript，存在纯CSS解决方案。参考CSS选择器，您需要使用“+”选择器来控制同级类

所以在你的情况下

.sibling:hover + .child{
    display:block;
}

控制将同级类悬停在上时的子类


.parent{
位置：相对位置；
宽度：1000px；
高度：200px；
背景：粉红色；
}
.兄弟姐妹{
宽度：100px；
高度：30px；
填充：8px；
边框：1px纯红；
背景：蓝色；
}
.孩子{
位置：绝对位置；
宽度：200px；
高度：50px；
顶部：60px；
背景：绿色；
显示：无；
}
.兄弟姐妹：悬停{
边框：3倍纯绿；
}
.sibling:悬停+.child{
显示：块；
}
您不需要javascript，存在纯CSS解决方案。参考CSS选择器，您需要使用“+”选择器来控制同级类

所以在你的情况下

.sibling:hover + .child{
    display:block;
}

控制将同级类悬停在上时的子类


.parent{
位置：相对位置；
宽度：1000px；
高度：200px；
背景：粉红色；
}
.兄弟姐妹{
宽度：100px；
高度：30px；
填充：8px；
边框：1px纯红；
背景：蓝色；
}
.孩子{
位置：绝对位置；
宽度：200px；
高度：50px；
顶部：60px；
背景：绿色；
显示：无；
}
.兄弟姐妹：悬停{
边框：3倍纯绿；
}
.sibling:悬停+.child{
显示：块；
}

为什么要悬停父类？！！子类永远不会出现在代码段中，也不会出现在代码段中。这不是问题所在。问题是保持边框颜色不变。为什么要将父类悬停在其上？！！子类永远不会出现在代码段中，也不会出现在代码段中。这不是问题所在。问题是保持边框颜色更改。请检查您的代码段，它根本不起作用。子div不出现，边框不改变颜色，什么都没有。我假设，您忘记添加jquery库了。请检查您的代码片段，它根本不起作用。子div不出现，边框不改变颜色，什么都没有。我假设，您忘了添加jquery LibraryDos。父对象只有一个。兄弟对象和。子对象？是否只保留.sibling悬停样式？很抱歉在你接受答案后问你（我删除了我的答案，因为我显然误读了），只是想知道你将如何使用这个。嘿，是的，只有一个兄弟姐妹和一个孩子OK酷。。。谢谢你的回复。父母是否只有一个。兄弟姐妹和。孩子？是否只保留.sibling悬停样式？很抱歉在你接受了一个答案（我删除了我的答案，因为我显然读错了），我只是想知道你将如何使用这个