当用户使用 css 将鼠标悬停在我的导航菜单“联系人”列表项上时,我想显示我的联系表单。
所以我想要一个解决方案来解释我如何使用 css 将鼠标悬停在“A”(菜单项)上以显示与“A”(内容)对应的内容,或者如果将鼠标悬停在 B 上它会显示 B 等等。
当用户使用 css 将鼠标悬停在我的导航菜单“联系人”列表项上时,我想显示我的联系表单。
所以我想要一个解决方案来解释我如何使用 css 将鼠标悬停在“A”(菜单项)上以显示与“A”(内容)对应的内容,或者如果将鼠标悬停在 B 上它会显示 B 等等。
这是我用于我的网站的很棒的教程:
您可以尝试以下基于纯 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/