Question

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

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

Answer 1

这是我用于我网站的精彩教程：

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

Answer 2

你可以尝试基于纯CSS的以下简单解决方案（没有javascripting，所以即使在客户端的计算机上禁用了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/

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

2 个答案: