我知道我会因为问这样的问题而被 mock ,但我是选择器的新手,并且正在为嵌入现有 UL 的子 UL 的悬停效果而苦苦挣扎。
HTML:
<ul id="ctxMenuStock">
<li><a href="#ctxCMDCopy">Copy</a></li>
<li><a href="#ctxCMDReserve">Reserve/Outgoing</a></li>
<li><a href="#">Set Status <span style="font-family: Webdings">6</span></a>
<ul id="ctxMenuStockStatuses" runat="server"></ul>
</li>
</ul>
ctxMenuStockStatuses 由页面加载时的服务器代码填充。
CSS:
#ctxMenuStock, #ctxMenuStock ul, #ctxMenuPending, #ctxMenuPending ul{
display:none;
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:fixed;
line-height:1.5em;
}
#ctxMenuStock a:link, #ctxMenuStock hr, #ctxMenuStock a:active, #ctxMenuStock a:visited, #ctxMenuPending a:link, #ctxMenuPending hr, #ctxMenuPending a:active, #ctxMenuPending a:visited{
display:block;
padding:0px 5px;
color:#fff;
text-decoration:none;
background-color:#333;
}
#ctxMenuStock>li:hover ul, #ctxMenuStock>li:hover ul li, #ctxMenuStock>li:hover ul li a
{
color:#fff;
background-color:#333;
}
#ctxMenuStock>li:hover a, #ctxMenuPending>li:hover a{
background-color:#fff;
color:#333;
}
#ctxMenuStock ul li ul li a:hover, #ctxMenuPending ul li ul li a:hover{
background-color:#fff;
color:#333;
}
#ctxMenuStockStatuses li
{
color:#fff;
background-color:#333;
}
#ctxMenuStockStatuses li:hover
{
background-color:#fff;
color:#333;
}
#ctxMenuStock li, #ctxMenuPending li{
float:none;
position:relative;
}
#ctxMenuStock ul, #ctxMenuPending ul {
position:absolute;
display:none;
float:left;
}
#ctxMenuStock li ul a, #ctxMenuPending li ul a
{
width:12em;
margin: 0 0 0 4px;
float:left;
}
#ctxMenuStock ul ul, #ctxMenuPending ul ul{
top:auto;
}
#ctxMenuStock li ul ul, #ctxMenuPending li ul ul {
left:12em;
margin:0px 0 0 10px;
}
#ctxMenuStock li:hover ul ul, #ctxMenuStock li:hover ul ul ul, #ctxMenuStock li:hover ul ul ul ul{
display:none;
}
#ctxMenuStock li:hover ul, #ctxMenuStock li li:hover ul, #ctxMenuStock li li li:hover ul, #ctxMenuStock li li li li:hover ul{
display:block;
}
#ctxMenuPending li:hover ul ul, #ctxMenuPending li:hover ul ul ul, #ctxMenuPending li:hover ul ul ul ul{
display:none;
}
#ctxMenuPending li:hover ul, #ctxMenuPending li li:hover ul, #ctxMenuPending li li li:hover ul, #ctxMenuPending li li li li:hover ul{
display:block;
}
菜单的样式基本上是深色背景和白色文本,但悬停时情况相反。这适用于父菜单,但子菜单不会改变,仍然是黑底白字。
我知道此 CSS 中的某些内容相互矛盾,但它变得难以理解。我似乎无法在网上找到很多(如果有的话)关于如何使用子菜单执行此操作的工作示例。
有人可以告诉我最好的方法吗。
编辑: 根据要求,创建了 JSFiddle 示例:http://jsfiddle.net/KzhEP/ 尽管在我的主元素中,oncontextmenu 属性附加到我的表服务器端的每一行。我模拟了一个简单的示例,但出于某种原因,我无法在 jsfiddle 上使用右键单击功能。
最佳答案
在这里很难说出你想要达到什么目的,但你可以尝试以下~
删除以下 css,因为它覆盖了嵌套的白底黑字 css 更改:
#ctxMenuStock>li:hover ul, #ctxMenuStock>li:hover ul li,
#ctxMenuStock>li:hover ul li a{
color:#fff;
background-color:#333;
}
然后把提供悬停效果的CSS选择器改成:
#ctxMenuStock>li:hover a, #ctxMenuPending>li:hover a{
background-color:#fff;
color:#333;
}
收件人:
#ctxMenuStock li:hover > a, #ctxMenuPending li:hover > a{
background-color:#fff;
color:#333;
}
通过这种方式,您可以将 #ctxMenuStock
和 #ctxMenuPending
中的所有 li
元素作为目标,没有深度问题 - 但您只操纵子 anchor 悬停的 li
元素的标签。
关于HTML/CSS 鼠标上下文菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14317810/