CSS: Zawiesić, aby wpłynąć na wszystkie div div dzieci

Question

Mam div jednostki nadrzędnej i wiele elementów div dziecka wewnątrz. Chcę, aby po najechaniu kursorem na element nadrzędny wpłynął na stan wskaźnika wszystkich div użytkownika w oddzielny sposób (tj. Tekst jednego elementu div zostanie podkreślony, tekst innego zmieni kolor, a element div zawierający obraz spowoduje obraz nieco jaśniejszy - tylko na przykład). Jak możesz to wdrożyć?

Oto kod obecnie używam:

<div id='main_categories_item'> 
    <div id='main_categories_item_image'> 
    <img src='http://www.ultimate-punch.com/images/small_icon/ironman.jpg'> 
    </div> 

    <div id='main_categories_item_text_container'> 
     <div id='main_categories_item_category'>culture review</div> 
     <div id='main_categories_item_short_subtitle'>Our critique of the latest Iron Man installment</div> 
     <div id='main_categories_item_date'>2nd April 2013</div> 
    </div> 
</div> 

W tym chciałbym #main_categories_item_category zmienić podkreślenie, #main_categories_item_short_subtitle zmienić kolor i #main_categories_item_image zmienić krycie.

Oto CSS mam tak daleko:

#main_categories_item { 
    height: 100%; 
    width: 100%; 
    background-color: #f4f4f4; 
    border-bottom: 1px solid #fff; 
    padding: 10px; 
    overflow:auto; 
} 
#main_categories_item_image { 
    float: left; 
    margin-right: 10px; 
} 
#main_categories_item_image img { 
    width: 64px; 
    height: 64px; 
} 
#main_categories_item_text_container{ 
    float: right; 
    width: 146px; 
    height: 64px; 
} 
#main_categories_item_category { 
    font-family: Trebuchet MS; 
    font-size: 14px; 
    text-transform: uppercase; 
    color: #991111; 
    height:17px; 
} 
#main_categories_item_short_subtitle { 
    font-family: Trebuchet MS; 
    font-size: 12px; 
    color: #171717; 
    height: 36px; 
} 
#main_categories_item_date { 
    font-family: Trebuchet MS; 
    font-size: 10px; 
    color: #575757; 
} 

Dziękujemy!

Answer 1

#main_categories_item_text_container:hover 
#main_categories_item_category { 
    text-decoration : underline; 
} 

#main_categories_item_text_container:hover 
#main_categories_item_short_subtitle { 
    color : blue; 
} 

#main_categories_item_text_container:hover 
#main_categories_item_image { 
    opacity : 0.5; 
} 

To powinno działać

Answer 2

Można po prostu nie podoba:

#parent:hover .child:hover { 
    color:red; 
} 

To uczyniłoby .child czerwono przy aktywowaniu, gdy unosi #parent.

Answer 3

Zamiast wpływając dziecka przez klasę, wpływa na dziecko według typu:

.parentClass div { 
    height: 100%; 
} 

Kod ten będzie dotyczyć wszystkich div „s wewnątrz klasy parent. Używając tej koncepcji, będziesz potrzebował jakiegoś rodzaju zmiennej, aby rozróżnić trzy divy. Na przykład, jeśli masz div A - div C i tylko div B ma obraz w nim, uruchomienie następującego kodu będzie oczywiście dotyczyć tylko obrazu w div B.

.parentClass div img { 
    /* make lighter */ 
} 

Przypuszczam, że powinieneś być w stanie conajmniej rzucić id tam do odróżnienia, nawet jeśli te div „s były tworzone dynamicznie, zarówno po stronie klienta lub po stronie serwera. W takim przypadku, który jest najgorszym scenariuszem, nadal istnieją sposoby dynamicznego przypisywania wartości id. Jeśli przypisany id poniższy kod będzie działać

.parentClass #div1 { 
    height: 10px; 
} 
.parentClass #div2 { 
    height: 20px; 
} 
.parentClass #div2 img { 
    /* make lighter */ 
} 
.parentClass #div3 { 
    height: 30px; 
} 

<div id="div2"> 
    <img src="images/example.png"/> 
</div> 

nadzieję, że pomoże :)