Как отключить наведение на ссылку? Я использую li: hover - PullRequest
Новая
       5

Как отключить наведение на ссылку? Я использую li: hover

1 голос
/ 09 октября 2010

Я пытаюсь отключить функцию наведения для меню.
Я хочу, чтобы он был включен только при определенных условиях.
Я пытался использовать $(".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;}

1 Ответ

1 голос
/ 09 октября 2010

Я думаю, что вы хотите 

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

вместо 

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

Теперь этот стиль будет влиять на ul только тогда, когда li находится в и имеет hover класс.

Упрощенный пример .

PS Вы также можете воспользоваться кнопкой «Пример кода» в форме редактирования (с нулями и единицами) для форматирования кода. Помимо прочего, он сохранит отступы (и, следовательно, повысит читабельность). Комбинация клавиш ctrl+K. Я отредактировал один из ваших примеров кода, чтобы продемонстрировать это.

...