проблемы иерархии при изменении стиля абзаца с css - PullRequest
Новая
       4

проблемы иерархии при изменении стиля абзаца с css

0 голосов
/ 10 марта 2020

Я хочу изменить стиль абзаца

с CSS, используя наведение на другой элемент без стиля по умолчанию

, перезаписывая его. HTML: 

<div id="wrap">

    <div class="a">AAAA</div>

    <div class ="b">
      <div class ="sub_b">
            <p>BBBB</p></div>
      </div>
</div>

CSS: 

.a {
    color: red;
}
p {
    color: green;
    text-align: center;
}

.a:hover ~ .b {
    background-color: blue;
    color: orange;
}

Я хочу изменить цвет шрифта BBBB на оранжевый при наведении курсора на AAAA. При наведении курсора шрифты в стиле BBBB получают команду на изменение цвета фона и цвета шрифта, но цвет шрифта перезаписывается стилем абзаца P. по умолчанию. Я не могу изменить большую часть иерархии html. Что я могу сделать только с CSS?

1 Ответ

0 голосов
/ 10 марта 2020

ваш css работает нормально! Просто выберите <p> внутри вашего class="b"

Как это: 

.a:hover ~ .b p {
    color: orange;
}


.a {
    color: red;
}
p {
    color: green;
    text-align: center;
}

.a:hover ~ .b {
    background-color: blue;
    color: orange;
}

.a:hover ~ .b p {
    color: orange;
}
<div id="wrap">

    <div class="a">AAAA</div>

    <div class ="b">
      <div class ="sub_b">
            <p>BBBB</p></div>
      </div>
</div>
...