псевдокласс наведения в CSS

Question

псевдокласс наведения в CSS

0

Пробовал узнать о CSS и использовании классов псевдонимов hover над элементами. Всякий раз, когда я выбираю вкладку на панели навигации, цвет фона меняет цвет (это то, что я хочу). Однако, когда я удаляю якорный текст, текст меняется на белый.

В идеале, я хочу, чтобы вкладка навигации превратила цвет фона в белый цвет, а текст черный вместе одновременно, когда мышь нависла над. Здесь код:

<head>
    <link rel="stylesheet" href="css.css" />
</head>

<body>
    <div id="container">
        <div id="title">
                <h1>Record Store</h1>

        </div>
        <div id="navigation">
            <ul class="navbar">
                <li><a href="#">Home</a>
                </li>
                <li><a href="#">Vinyl Stock</a>
                </li>
                <li><a href="#">Online Offers</a>
                </li>
                <li><a href="#">Collectors News</a>
                </li>
                <li><a href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</body>

и код CSS:

* {
    border: 0;
    padding: 0;
    margin:0;
}
#container {
    margin: auto;
    width: 800px;
    border: 1px solid black;
    min-height: 600px;
    z-index: -9;
}
#title {
    margin:auto;
    /*border: 1px solid black;*/
    height: 30%;
}
#navigation {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    height: auto;
    overflow: auto;
}
.navbar {
}
.navbar ul {
}
.navbar li {
    font: bold 12px/1.2em Arial, Verdana, Helvetica;
    height: auto;
    list-style: none;
    text-align: center;
    width: 20%;
    float:left;
    background-color: blue;
    padding: 1% 0px;
}
.navbar a {
    border-right: 1px solid #1F5065;
    color: white;
    display: block;
    text-decoration: none;
}
.navbar a:hover {
    color: black;
}
.navbar li:hover {
    background-color: white;
}

Может кто-нибудь взглянуть и указать, где я иду не так?

LeDoc 10 нояб. 2013, в 16:56

Источник

Теги:

html

css

1 ответ

Ещё вопросы

Daniel Gimenez · Accepted Answer · 2013-11-10T13-59-00.000Z

Вам просто нужно быть более сознательным в определении ваших селекторов. Вы делаете одно, когда кто-то парит над li и что-то еще, когда они парят над a. Вы хотите изменить оба элемента при падении над общим элементом.

Чтобы решить проблему, удалите:

.navbar a:hover {
    color: black;
}

И замените его на:

.navbar li:hover a {
    color: black;
}

jsFiddle

Первый селектор говорит: "Получить все a:hover, что дети в .navbar ," второй селектор говорит: "Получить все a том, что дети в li:hover, которые являются детьми .navbar. "

Итак, читается ли это так: если при наведении указателя мыши на элемент .navbar <li> изменить цвет текста <a> на черный?
Забавно, я добавил это к своему ответу, когда ты, вероятно, писал свой комментарий. Это больше похоже на «Получить все в li: hover в .navbar; применить цвет: черный;»