Родитель li в выпадающем списке не меняет цвет при наведении - PullRequest
Новая
       40

Родитель li в выпадающем списке не меняет цвет при наведении

4 голосов
/ 19 октября 2011

У меня есть <li>, который при наведении курсора показывает <ul> под ним.Я, наконец, выровнял границы, но теперь по какой-то причине цвет li:hover не изменится, когда я наведусь на него.Кажется, что происходит, когда <ul> активен, родительский <li> остается в соответствии с CSS.

Вот jsFiddle, показывающий, что происходит:

http://jsfiddle.net/Luryf/

Когда отображается <ul> и родительский элемент <li> не находится над ним, яхотелось бы, чтобы родительский элемент <li> имел такой же цвет фона и цвет рамки для элементов <li> в пределах <ul>.Как лучше всего это исправить, поддерживая целостность границ всего <div>?

Ответы [ 3 ]

3 голосов
/ 19 октября 2011

Вы можете изменить 

#nav li#parent:hover {

на 

#nav li#parent a:hover {

Также вы можете указать: 

#nav li#parent:hover {
    background-color:#CCD9FF;
    border-color: #99B3FF;
}

, чтобы он выглядел согласованноhttp://jsfiddle.net/Luryf/4/

обновление: упс.Кажется, также необходимо переместить border-* и border-radius-* в свои собственные.(от parent до parent a) http://jsfiddle.net/Luryf/8/

от: 

#nav li#parent{
    background-color:#FFF;
    border-top-right-radius:5px 5px;
    border-top-left-radius:5px 5px;
    -moz-border-top-left-radius:5px 5px;
    -moz-border-top-right-radius:5px 5px;
    -webkit-border-top-left-radius:5px 5px;
    -webkit-border-top-right-radius:5px 5px;
    border-top:1px solid #FFF;
    border-right: 1px solid #FFF;
    border-left:1px solid #FFF;
}

#nav li#parent:hover{
    background-color:#CCD9FF;
    border-color: #99B3FF;
}

до: 

#nav li#parent {
    background-color:#FFF;
}
#nav li#parent a {
    border-top-right-radius:5px 5px;
    border-top-left-radius:5px 5px;
    -moz-border-top-left-radius:5px 5px;
    -moz-border-top-right-radius:5px 5px;
    -webkit-border-top-left-radius:5px 5px;
    -webkit-border-top-right-radius:5px 5px;
    border-top:1px solid #FFF;
    border-right: 1px solid #FFF;
    border-left:1px solid #FFF;
}

#nav li#parent:hover a {
    background-color:#CCD9FF;
    border-color: #99B3FF;
}
2 голосов
/ 19 октября 2011

Если вы не против использования какого-либо jQuery, вы можете сделать это 

$('ul#children').hover(
   function(){
       $(this).parent('li').css('background-color','#CCD9FF');
    },   
    function(){
        $(this).parent('li').css('background-color','');
    } 
);

Пример: http://jsfiddle.net/Luryf/1/

0 голосов
/ 19 октября 2011

Как это: jsfiddle

Я сделал так, чтобы #parent li не обернулся вокруг ul, изменил некоторые css, главное, этот: 

#nav li:hover + ul, #nav ul ul:hover {
    display:block;
    z-index:100;
}

обновление

и добавил это: 

#nav li, #nav ul:hover #parent {
    background-color:#CCD9FF;
}

#nav ul:hover #parent {
border-left: 1px solid #99B3FF;
border-right: 1px solid #99B3FF;
    border-top: 1px solid #99B3FF;
}

До 

#nav li#parent:hover { ... }
...