CSS：懸停影響所有子div

我有一個父div和多個子divs裏面。我想要它，所以如果你將鼠標懸停在父div上，它會以不同的方式影響所有小孩div的懸停狀態（即一個div的文本被加下劃線，另一個div的文本改變顏色，圖像有點亮 - 例如）。你怎麼能實現這個？CSS：懸停影響所有子div

這是我目前使用的代碼：我想#main_categories_item_category改變下劃線，#main_categories_item_short_subtitle改變顏色和#main_categories_item_image改變透明度

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

在此。

這裏的CSS到目前爲止我有：

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

謝謝！

來源

2013-05-02 DorianHuxley

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

這應該工作

來源

2013-05-02 21:55:39

你可以只是不喜歡它：

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

這將使懸停.child紅，徘徊#parent時。

來源

2013-05-02 21:56:12 Elias

其實，這是因爲'.child的：hover'，它不會做他想做的事，因爲他想當父母被徘徊時，所有3格變化。 – 2013-05-02 21:59:56

幫我解決另一個問題:) – 2013-11-04 19:34:00

而不是影響由類孩子，按類型影響孩子：

.parentClass div { 
    height: 100%; 
}

該代碼會影響類parent內的所有div的。使用這個概念，你將需要一些類型的變量來區分三個div。例如，如果您有div A - div C且只有div B包含圖像，則運行以下代碼顯然只會影響div B中的圖像。

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

我會認爲你應該能夠ATLEAST扔在那裏的id來區分，即使正在動態創建這些div的，無論是客戶端或服務器端。如果是這種情況，最糟糕的情況是，仍然有動態分配id的方法。如果您分配了id，下面的代碼將工作

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

希望幫助:)

來源

2013-12-12 18:24:40

CSS：懸停影響所有子div

回答

相關問題