CSS: di chuột để ảnh hưởng đến tất cả các div con

Question

Tôi có div cha và nhiều div con bên trong. Tôi muốn nó để nếu bạn di chuột qua div mẹ, nó ảnh hưởng đến trạng thái di chuột của tất cả các div ảo theo cách riêng biệt (tức là văn bản của một div được gạch dưới, văn bản của một màu khác thay đổi và div giữ hình ảnh hình ảnh nhẹ hơn một chút - chỉ ví dụ). Làm thế nào bạn có thể thực hiện điều này?

Đây là mã Tôi hiện đang sử dụng:

<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> 

Trong này tôi muốn #main_categories_item_category để thay đổi gạch dưới, #main_categories_item_short_subtitle để thay đổi màu sắc và #main_categories_item_image để thay đổi độ mờ đục.

Đây là CSS Tôi đã có cho đến nay:

#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; 
} 

Cảm ơn bạn!

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; 
} 

Nên hoạt động

Answer 2

Bạn có thể chỉ cần nó thích:

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

Điều đó sẽ làm cho màu đỏ .child trên di chuột, khi lơ lửng #parent.

Answer 3

Thay vì ảnh hưởng đến trẻ bởi lớp, ảnh hưởng đến đứa trẻ theo loại:

.parentClass div { 
    height: 100%; 
} 

Mã này sẽ ảnh hưởng đến tất cả div 's trong lớp parent. Sử dụng khái niệm này, bạn sẽ cần một số loại biến để phân biệt giữa ba div. Ví dụ: nếu bạn có div A - div C và chỉ div B có hình ảnh trong đó, việc chạy mã sau rõ ràng sẽ chỉ ảnh hưởng đến hình ảnh trong div B.

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

tôi sẽ giả định rằng bạn sẽ có thể để ít nhất ném một id ở đó để phân biệt, ngay cả khi những div 's đã được tạo ra tự động, hoặc là client-side hoặc server-side. Nếu trường hợp đó xảy ra, đó là kịch bản trường hợp xấu hơn, vẫn có các cách gán động id. Nếu bạn chỉ định một id, đoạn code sau sẽ làm việc

.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> 

Hy vọng rằng sẽ giúp :)