Question

我正在尝试禁用菜单的悬停功能我希望它只在某些条件下启用我尝试过使用$(".ulColor").removeClass('hover');，但是没有用过启用悬停的CSS代码是：

li:hover ul, li.over ul { display: block; }

这是菜单所在的HTML DIV -

<div id="pColorSelectorDiv" class="parentOfAll">  
    <ul id="colorNav" class="ulColor">  
        <li id="liColorNav" ><a id="colorSelected" class="firstAnchorChild">Colors</a>  
            <ul id="ulColorChild" class="ulColor">  
                <li><a id="bkgColor-1" class="bkgColor-1 anchorClass" name="colorPallete" onclick="colorPicked('1');">COLOR</a></li>  
                <li><a id="bkgColor-2" class="bkgColor-2 anchorClass" name="colorPallete" onclick="colorPicked('2');">COLOR</a></li>   
               <li><a id="bkgColor-3" class="bkgColor-3 anchorClass" name="colorPallete" onclick="colorPicked('3');">COLOR</a></li>   
           </ul>  
        </li>  
    </ul>  
</div>

以下是CSS代码的其余部分：

div[id="pColorSelectorDiv"] ul {  
    margin: 0;  
    padding: 0;  
    list-style: none;  
    width: 50px; /* Width of Menu Items */  
    border-bottom: 1px solid #ccc;  
    }  

div[id="pColorSelectorDiv"] ul li {  
    position: relative;  
    } 

.firstAnchorChild{  
    display: block;  
    text-decoration: none;  
    color: #777;  
    background: White; /* IE6 Bug */  
    padding: 5px;  
    border: 1px solid #ccc; /* IE6 Bug */  
    border-bottom: 0;  
    cursor: pointer;  
    }  


li ul {  
    position: absolute;  
    left: 49px; /* Set 1px less than menu width */  
    top: 0;  
    display: none;  
    background: White;  
    }  


/* Styles for Menu Items */  
.anchorClass{  
    display: block;  
    text-decoration: none;  
    color: #777;  
    background: White; /* IE6 Bug */  
    padding: 5px;  
    border: 1px solid #ccc; /* IE6 Bug */  
    border-bottom: 0;  
    cursor: pointer;  
    }  

.bkgColor-1 {background: #00FFFF; color: #00FFFF;}  
.bkgColor-2 {background: #0000FF; color: #0000FF;}  
.bkgColor-3 {background: #7FFF00; color: #7FFF00;}

Answer 1

我想你想要

li.hover:hover ul { display: block; }

而不是

li:hover ul, li.over ul { display: block; }

现在，只有当ul悬停并且有li类时，此样式才会影响hover。

A simplified example

PS您也可以使用编辑表单（带有零和一的表格）上的“代码示例”按钮来格式化代码。除此之外，它还会保留缩进（从而提高可读性）。关键组合是ctrl+K。我编辑了一个代码示例来演示它。

如何禁用链接的悬停？我正在使用li：hover

1 个答案: