如何根据导航悬停更改内容 div答案

【问题标题】：How do you change the content div based on the navigation hover如何根据导航悬停更改内容 div
【发布时间】：2013-05-05 14:17:49
【问题描述】：

当用户使用 css 将鼠标悬停在我的导航菜单“联系人”列表项上时，我想显示我的联系人表单。

所以我想要一个解决方案来解释如何使用 css 将鼠标悬停在“A”（菜单项）上以显示与“A”（内容）相对应的内容，或者如果将鼠标悬停在 B 上它会显示 B 等等开。

【问题讨论】：

听起来像是一道测试题，到目前为止你尝试过什么？
我看到这样做的唯一问题是，如果用户在移动设备上，您将不得不为移动设备编写代码。最好的解决方案是创建一个包含信息的 div，并将显示设置为无。放置一个悬停，将显示更改为阻止。

标签： css wordpress dynamic navigation

【解决方案1】：

这是我用于我的网站的很棒的教程：

http://codeissue.com/articles/a04e0d17a60fad8/simple-html-drop-down-hover-menu-using-just-css-no-javascript

【讨论】：

【解决方案2】：

您可以尝试以下基于纯 CSS 的简单解决方案（没有 javascript，因此即使客户端计算机上禁用了 javascript 也可以使用）：

HTML

<body>
    <div class="itemHeader">A</div>
</body>

CSS3

div.itemHeader {cursor:pointer;}

div.itemHeader:after {
    content: "Blah-Blah-Blah";
    color: #909090;
    display:block;
    opacity:0;
}

div.itemHeader:hover:after{opacity:1;}

jsfiddle 链接：http://jsfiddle.net/fLMSd/

【讨论】：