为什么CSS悬停不起作用？

Question

我的网站是test06.menchasha.ru。我正在尝试应用悬停效果。当“促销活动”链接悬停时，右侧的div应出现。 Example

我使用了以下代码：

.child1 {
display: none;
}


a .title1:hover + .child1 {
display: inline-block;
}

但是悬停效果不起作用。我应该纠正什么？ 提前谢谢！

Answer 1

我已经检查了链接中的代码 - 您无法通过结构实现所需的效果，只能使用CSS。

这是你的代码：

a .title1:hover + .child1 {
  display: inline-block;
}

如果您希望它以您需要的方式运作，a元素必须有2个孩子：.title1和.child1，.child1必须是.title1的直接兄弟1}}因为+选择器可以帮助您只访问元素的最近兄弟。但是在您的结构中，所有.child元素都不是.title元素的兄弟元素，它们位于另一个div块中。所以只需使用JS就可以在悬停时看到它们。