下拉悬停CSS

Question

有人可以帮助我修复此网站有neowin.net的下拉菜单吗？

到目前为止，我有这个; itbataljonen.com/test/（将鼠标悬停在“新闻”上）

我无法弄清楚的是，当我将鼠标悬停在"News" -> "Apple"上时，应该会有一些带图片的新闻，如果我将鼠标悬停在"Microsoft"上等等，它们就会改变。

可以通过CSS或HTML完成吗？

要下载源文件，只需转到www.ITbataljonen.com/test，然后点击导航栏中的“下载源”。

有人能帮助我吗？ :)（抱歉我的英文不好......）

Answer 1

Working Fiddle

正如你要求使用css。是的，通过使用CSS可以隐藏和显示另一个div。您只需编写悬停事件即可。这也适用于“apple”和“microsoft”。

这是 css：

#a:hover + #b {
 background: #ccc;
    visibility: visible;
}
#b{
   visibility: hidden;
}

Answer 2

这可以使用CSS中的悬停属性来完成。 阅读此question以了解更多信息。

在您的情况下，图像可以在<ul id="news_images1"></ul>中，您可以设置css hover属性来为此图像列表设置动画。请记住，有多种方法可以解决此问题。你也可以签出Jquery悬停。