CSS фокус не может повлиять на другие элементы [дубликат]

На этот вопрос уже есть ответ здесь:

Я огляделся вокруг и не могу найти решение для того, чтобы заголовок появлялся, когда форма сфокусирована. Я, вероятно, упускаю что-то вопиюще очевидное (вероятно, что этого не может быть сделано с этим селектором).

В идеале я хотел бы избежать jQuery и придерживаться CSS (более продвинутый CSS-это нормально), так как у меня нет планов поддерживать IE - я люблю учиться, но IE слишком много боли для меня.

Это мой CSS на данный момент: 

#search-title {
    color: rgba(0, 0, 0, 0);
    font-size: 20px;
    font-weight: 300;
    margin-left: -30px;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
}

input[type="text"]:focus #search-title {
    color: #F70;
    margin-left: 35px;
}

Заранее спасибо,

Сэм

4 3
focus html css pseudo-class

4 ответа:

Хорошо, у меня есть решение, которое работает исключительно с CSS, но вам придется немного покачать свои html-элементы.

Единственный способ выбрать другой элемент, который не является потомком опорного элемента (о котором я знаю), - это использоватьродственный селектор (Общий или смежный). Однако это решение основывается на том, что опорный элемент (входные данные) и целевой элемент (заголовок) являются братьями и сестрами в иерархии dom.

Вот краткий пример : http://jsfiddle.net/7AaDc/1/

Для записи в примере используется общий селектор сиблинга ( ~ ), но соседний (+) будет работать так же хорошо в этом случае.

Вот гораздо лучшее объяснение селекторов братьев и сестер (и детей): http://css-tricks.com/child-and-sibling-selectors/

Вот краткое описание проблем совместимости, связанных с родственными селекторами: http://caniuse.com/#search=sibling (tl; dr, довольно широко поддержал эти дней)

6

Вы использовали селектор потомков, который означает, что" #search-title " должен появиться в вашем входном элементе, чтобы он соответствовал правилу - и это явно не произойдет.

На самом деле нет селектора CSS, который будет соответствовать #search-title, Когда ваш ввод является каким-либо конкретным состоянием, учитывая, как структурирован ваш документ.

1

Возможно, попытка div внутри формы может сделать трюк

Или попробуйте Один из этих

0

Проблема выглядит так, как будто вы пытаетесь создать стиль элемента, который не является вложенным, то есть 

input[type="text"]:focus #search-title

Говорит стилизовать элемент с идентификатором " search-title", когда он является дочерним элементом элемента, который соответствует " input[type="text"]:focus", но из фрагмента, который вы публикуете, я предполагаю, что на самом деле это не ребенок в смысле DOM.

Вы можете посмотреть на селекторы родственных стилей (например, "A + B "соответствует элементу B, но только тогда, когда у него есть предыдущий родственный элемент, который является A), особенно" ~ " может помочь, но если элементы довольно несопоставимы в тогда вам, возможно, придется сделать что-то хитрое с реструктуризацией вашего DOM или вернуться к javascript.

0