Почему на соседний элемент не применяется hover?

Question

[mindgrow]

есть css

.document .info:hover ~  .doc-logo{
    background-image: url(../content/document-active.png);
}

есть html

<div class="document">
                        <div class="doc-logo"></div>
                        <div class="info">
                            <div class="title">Правила безопасности при работе с онлайн сервисами</div>
                            <div class="size">.pdf 4.3 MB</div>
                        </div>
                    </div>

Почему hover не применяется к doc-logo?

Comments

[Антон Федорян]

а почему должен?

[Антон Федорян]

.info:hover ~ .doc-logo
селектор не отработает, последовательность неверная

Answer 1

[kupurim]

Читаем доку:
div ~ p

правые соседи: все p на том же уровне вложенности, которые идут после div

Т.е. следующие елементы за вашим.
У вас должен быть такой html:

<div class="document">
  <div class="info">
    <div class="title">Правила безопасности при работе с онлайн сервисами</div>
    <div class="size">.pdf 4.3 MB</div>
   </div>
  <div class="doc-logo"></div>
</div>

Comments

[mindgrow]

спасибо