我创建了一个菜单。但是我没有使用列表,而是使用了几个如下所示的 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 中,具有类“format”。这是我的菜单的 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 的显示。
最佳答案
您正在重复您的选择器。使用这个:
#forms .formsLi:hover .format{
display: block;
}
关于html - 将鼠标悬停在菜单元素上时更改元素的布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11240721/