我创建了一个菜单。但我没有使用列表,而是使用了几个 div 和 span,如下所示:
<div id="forms">
<span class="formsLi">Einloggen<cfinclude template="login.cfm" /></span>
<span class="formsLi">Registrieren<cfinclude template="forms/register.cfm" /></span>
</div>
使用“cfinclude”,我插入了两个表单,它们都在一个 div 中,具有“格式”类。这是我的菜单的 css 文件:
#forms{
background-color: silver;,
border: 1px solid black;
margin: 0;
padding: 0.8em;
}
#forms .formsLi{
background-color: orange;
margin-left: 10px;
padding: 10px;
}
#forms .formsLi .format{
border: 1px solid black;
display: none;
float: left;
}
#forms .formsLi:hover{
background-color: black;
color: white;
}
#forms .formsLi:hover #forms .formsLi .format{
display: block;
}
将鼠标悬停在“formsLi”元素之一上时,我想更改包含的表单的显示。悬停确实有效,但最后一个 css 规则不会改变 div 的显示。