Html CSS嵌套div:悬停不起作用

意图：

• 有漂亮照片和标题的女主角
• 当访问者将鼠标悬停在div上时，漂亮的内容将被描述性文本替换
• 仅CSS的解决方案

很简单，对吧

以下是我正在尝试的：

HTML:

为什么不起作用？

---

当我在Chrome中查看页面并使用inspector进行检查时，在“drueber”元素上打开：hover状态，它会按预期工作。但是当我实际悬停在div上时，什么也没有发生。

因为

.drueber

显示了

无属性它不能悬停。因此，您需要在父对象上触发悬停事件，如下所示：

.drunter:hover .drueber {
    display:block;
}

因为
.drueber
有
显示：无属性它不能悬停。因此，您需要在父对象上触发悬停事件，如下所示：

.drunter:hover .drueber {
    display:block;
}


我在css中做了一些修改，尝试一下这段代码

我在css中做了一点修改，试试这个代码。
奇怪的是
悬停
st。什么是隐藏的并且有
宽度=0，高度=0
（所以你不能悬停）：-）奇怪的是
悬停
st。隐藏的并且有
宽度=0，高度=0
（所以你不能悬停）：-）哇！那是一个快速的！还不能将其设置为答案，但这就是答案！非常感谢。哇！那是一个快速的！还不能将其设置为答案，但这就是答案！非常感谢。谢谢waqas，但据我所知，这并没有给WebTikis的答案增加什么，对吗？我非常不喜欢
！重要信息
在我的CSS代码中…谢谢waqas，但从我所能说的来看，这不会给web tikis的答案增加任何内容，对吗？我非常不喜欢
！重要信息
在我的CSS代码中。。。
.drunter:hover .drueber {
    display:block;
}

.drunter {
    position:relative;
    background-color:#f00;
}
.drueber {
    display:none;
    background-color:#00f;
}
.drunter:hover .drueber {
    display:block !important;
}