如何更改基于导航悬停的内容div

我想要显示我的联系人表单，当用户悬停在我的导航菜单“联系人”列表项目使用CSS。如何更改基于导航悬停的内容div

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

来源

2013-05-10 Shawn

听起来像一个测试问题，你尝试过这么远吗？ – Huangism 2013-05-10 20:08:11

我这样做的唯一问题是，如果用户在移动设备上，则必须为移动设备编码。最好的解决方案是创建一个包含其中信息的div，并将显示设置为none。放置一个悬停，将显示更改为阻止。 – Cam 2013-05-10 20:49:10

这里是伟大的教程，我用我的网站：

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

来源

2013-05-10 20:17:26 NinjaTurtles

你可以试试下面这个简单的解决方案基于纯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/

来源

2013-05-10 20:36:10

如何更改基于导航悬停的内容div

回答

相关问题