CSS-当另一个div悬停时显示一个div

当另一个div悬停时，我试图显示一个div（.mydiv3），但我要显示的div

.mydiv1、.mydiv2、.mydiv3{
显示：无；
}
.扳机{
文本对齐：居中；
填充：10px；
颜色：青绿色；
}
.触发器：悬停{
背景：红色；
}

悬停触发器
文本内容1
文本内容2
文本内容3

您可以在CSS中使用

~

来获得所需的结果。检查代码段

.mydiv1、.mydiv2、.mydiv3{
显示：无；
}
.扳机{
文本对齐：居中；
填充：10px；
颜色：青绿色；
}
.触发器：悬停{
背景：红色；
}
.trigger:悬停~.mydiv3{
显示：块；
}

悬停触发器
文本内容1
文本内容2
文本内容3

您可以在CSS中使用

~

来获得所需的结果。检查代码段

.mydiv1、.mydiv2、.mydiv3{
显示：无；
}
.扳机{
文本对齐：居中；
填充：10px；
颜色：青绿色；
}
.触发器：悬停{
背景：红色；
}
.trigger:悬停~.mydiv3{
显示：块；
}

悬停触发器
文本内容1
文本内容2
文本内容3

您可以使用通用同级选择器进行此操作

.mydiv1，
.mydiv2，
.mydiv3{
显示：无；
}
.扳机{
文本对齐：居中；
填充：10px；
颜色：青绿色；
}
.触发器：悬停{
背景：红色；
}
.trigger:悬停~.mydiv3{
显示：块；
}

悬停触发器
文本内容1
文本内容2
文本内容3

您可以使用通用同级选择器进行此操作

.mydiv1，
.mydiv2，
.mydiv3{
显示：无；
}
.扳机{
文本对齐：居中；
填充：10px；
颜色：青绿色；
}
.触发器：悬停{
背景：红色；
}
.trigger:悬停~.mydiv3{
显示：块；
}

悬停触发器
文本内容1
文本内容2
文本内容3

使用JQuery：

$(".trigger").mouseout(function() {
    $(".mydiv3").hide();
})
.mouseover(function() {
    $(".mydiv3").show();
});

使用JQuery：

$(".trigger").mouseout(function() {
    $(".mydiv3").hide();
})
.mouseover(function() {
    $(".mydiv3").show();
});

---

这将显示悬停时的所有兄弟div；他只想显示

.mydiv3

。我以为他想显示所有三个，因为他在所有的屏幕上都有一个

显示屏：none

。没有注意到他只提到了

.mydiv3

。编辑代码。谢谢这将显示悬停时的所有兄弟div；他只想显示

.mydiv3

。我以为他想显示所有三个，因为他在所有的屏幕上都有一个

显示屏：none

。没有注意到他只提到了

.mydiv3

。编辑代码。谢谢Tx for

~

有用如果不是兄弟姐妹，是否有其他选择？例如，如果我要显示的div在另一个单独的列表中？如果不是同级，则应使用jQuery，使用

mouseenter

和

mouseleave

methodsTx，以查看

~

是否有用如果它不是同级，是否有其他选择？例如，如果我要显示的div在另一个单独的列表中？如果不是同级的，则应该使用jQuery的

mouseenter

和

mouseleave

方法