Переход CSS3, целевой элемент до элемента hover

Question

Я пытаюсь узнать немного больше о переходах CSS3 и «классных вещах». Таким образом, у меня есть несколько отличных анимаций на моем сайте, и я сделал некоторые исследования Google, которые помогли мне совсем немного.

Я хотел выбрать элемент вне моего элемента hover. Я узнал, что с помощью знака + вы можете настроить таргетинг на элемент, который появляется после элемента hover. Небольшой пример (в LESS):

header{ 
    display: inline-block; 
    div#bg_2{ 
     color:#000; 
    } 
    div#container{ 
     float:left; 
     &:hover{    
      & + nav { 
       ul{ 
        opacity: 0; 
       } 
       li{ 
        .transition(1200ms, ease-in-out); 
        margin-left:-100px; 
       } 
      } 
     } 

    } 
    nav{ 
     height:30px; 
    } 
} 

Так что этот пример позволяет мне дать переход к элементу после элемента парения. Но мой вопрос в том, можно ли сделать обратное? Нацеливать элемент перед элементом наведения? В примере используется элемент bg_2.

Answer 1

! subject selector в черновике CSS-селекторов 4 - это способ выбора предыдущего элемента. Он предлагает, чтобы вместо того, чтобы писать .one + .two { … } в стиле .two, вы можете написать !.one + .two { … } в стиле .one.

Однако ! в настоящее время не используется ни в одном браузере. И спецификация CSS Selectors 4 все еще может измениться, потому что это черновик. Кроме того, спецификация в настоящее время отмечает селектор объектов ! как «полный» profile, который предназначен для использования JavaScript, но не в «быстром» профиле, который должен использовать CSS.

Поскольку вы не можете использовать !, в настоящее время нет способа выбрать то, что вы хотите, с помощью чистого CSS.

См. Также this answer about there being no parent selector, который ссылается на спецификации CSS, где вы можете найти все определенные селекторы.

Answer 2

Только CSS не может достичь того, что вам нужно. У нас есть одноуровневые селекторы (+ и ~), но элемент мишенью должен прийти после первого элемента. *

В качестве простого примера, проверьте this fiddle. Учитывая эту разметку:

<p class="one">One</p> 
<p class="two">Two</p> 

и этот CSS:

.one ~ .two { background: red; } 
.two ~ .one { background: green; } 

Вы могли бы ожидать .one закончить зеленый и красный .two. В действительности только .two получает цвет фона, потому что вторая строка пытается стилизовать элемент, который предшествует в DOM.

* + является смежным смежным браслетом, ~ общий комбинированный комбинатор. См. Это CSS Tricks article для деталей. Они очень похожи: + будет нацелен только на элемент непосредственно после другого конкретного элемента, тогда как ~ будет нацелен на родного брата, который появляется где-нибудь после него.