2010-02-06 10 views
33

Jak mogę zmienić tło rodzica <div> gdy <input> lub <a> jest: focus'd (lub dowolny inny dynamiczny pseudo-klasawpływające elementem dominującym: elementu focus'd (HTML + CSS czystej preferowanej)

Np

<div id="formspace"> 
<form> 
<label for="question"> 
How do I select #formspace for the case when a child is active?</label> 
<input type="text" id="question" name="answer"/></form></div> 
+0

Nope: http: //en.wikipedia .org/wiki/Cascading_Style_Sheets # Ograniczenia (drugi punkt) –

+0

Nie, nawet z CSS 3. – graphicdivine

+0

Dziękuję wszystkim, tylko sprawdzenie, ponieważ nie mogłem wymyślić żadnego sposobu z czystym ruchem CSS i znaczników html. mógłbym to zrobić, po prostu chciałem mieć czyste ręce –

Odpowiedz

27

Niestety css nie obsługuje selektorów nadrzędnych. :(
więc jedynym sposobem, aby to zrobić jest użycie javascript jak jQuery parent method

Aktualizacja:. Selektory CSS Level 4 będzie wspierać selektorów nadrzędne http://www.w3.org/TR/selectors4/#subject

+0

[Wygląda na to, że selektory nadrzędne go nie wykonają.] (Http://css4.rocks/selectors-level-4/subject-of-selector.php) –

6

jedynym sposobem mogę myśleć jest z javascript:

function focusLink(isOnFocus) 
{ 
    if (isOnFocus) 
     document.getElementById('formspace').className = "<make a focus class name here>"; 
    else 
     document.getElementById('formspace').className = "<default class name here>"; 
} 

...

<input onFocus="focusLink(true)" onBlur="focusLink(false)"> 

Nadzieję, że pomaga!