Фокус перспективы (выделение серым цветом других элементов и выделение тока) для элементов меню с помощью CSS - PullRequest
Новая
       14

Фокус перспективы (выделение серым цветом других элементов и выделение тока) для элементов меню с помощью CSS

2 голосов
/ 07 марта 2012

У меня есть список меню, как показано ниже: 

<div id="menubar">
    <ul class="menulist">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Что я пытаюсь сделать, так это то, что изначально цвет шрифта для пунктов меню был темно-серый. Но когда пользователь наводит курсор на какой-либо элемент меню, этот конкретный элемент остается темно-серым, а остальные элементы становятся светло-серыми.

У меня следующий CSS. 

    #menubar a {
        color: #202021;
        display: block;
        padding: 6px;
        text-decoration: none;
    }

    #menubar a:hover {
        display: block;
        padding: 6px;
        background-color: #97979B;
        border-radius: 3px;
        font-weight: bold;
    }

    #menubar .menulist:hover {
        color: #747478;
    }

Но color, указанное в .menulist:hover, не применяется к элементам меню, кроме элемента поиска, в то время как свойства, отличные от color, применяются к остальным пунктов меню при наведении курсора на любое меню. вещь. Я следовал за этим ТАК вопросом, который имел несколько схожее требование.

Как я могу получить это поведение с чистым CSS?

1 Ответ

3 голосов
/ 07 марта 2012

Измените два селектора следующим образом: 

#menubar .menulist:hover  a {
    color: #747478;
}​

#menubar .menulist:hover a:hover {
    display: block;
    padding: 6px;
    background-color: #97979B;
    border-radius: 3px;
    font-weight: bold;
}

DEMO

Быстрое слово на втором селекторе #menubar .menulist:hover a:hover:

Обычно, это необходимо только для применения вашей CSS, потому что вы не меняете цвет якоря, когда a:hover: 

#menubar .menulist:hover a {
    color: #747478;
}​

#menubar a:hover {
    ...
    /* no color change here */
}

Если вы решите изменить цвет привязки, она не будет применена, поскольку селектор #menubar .menulist:hover a имеет более высокую специфичность, чем #menubar a:hover

Пример * * тысяча двадцать шесть

Создание второго селектора #menubar .menulist:hover a:hover гарантирует, что он имеет более высокую специфичность, чем #menubar .menulist:hover a, и правила корректно переопределяют

* 1 031 ** ** 1033 тысяча тридцать две * Пример * ** 1036 тысяча тридцать-пять *

Подробнее:

...