連接。內容：hover和IMG：懸停，所以它們激活的同時

我想這2懸停類連接，所以它們激活的同時：連接。內容：hover和IMG：懸停，所以它們激活的同時

#recent-posts .content:hover { 
    -webkit-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.04); 
    -moz-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.04); 
    box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.04); 
} 

#recent-posts img:hover { 
    outline: 11px solid #ff7454; 
    margin-bottom: 15px; 
}

所以每當你將鼠標懸停在內容或圖像兩個懸停類將激活。我嘗試了很多不同的方式來做到這一點，並閱讀了所有內容，但這似乎比它應該更復雜一些。

任何人都可以指向正確的方向嗎？

這裏是我到目前爲止有一個的jsfiddle：http://jsfiddle.net/zpwnL/

來源

2014-07-10 ve1jdramas

請你可以發表演示。 –

它很大程度上取決於您的HTML結構和編輯HTML的能力，以便我們可以有一個簡單的解決方案。 –

@KheemaPandey我已經用小提琴更新了問題來演示。我也使用bootstrap 3，但這只是css計算它不需要。 – ve1jdramas

我會使用父選擇器風格的子元素：

#recent-posts .thumbnail:hover { 
... 
} 

#recent-posts .thumbnail:hover img { 
box-shadow:.... 
}

如果元素沒有一個共同父元素，則必須使用JavaScript。

來源

2014-07-10 10:23:19

當我嘗試這種方式時，箱子陰影根本不起作用，實際上這與上面的答案相同。這會導致陰影進入img而不是.thumbnail類。 – ve1jdramas

它在工作：http://jsfiddle.net/zpwnL/4/在這裏有一個藍色的影子更引人注目：http://jsfiddle.net/zpwnL/7/ –

Ohhhhh好吧，對不起，我有混合類向上！真棒，現在完全有道理謝謝你！ – ve1jdramas

您應該應用:hover一個元素，從這個元素繼續增加選擇也適用於這些

看到這個小提琴：http://jsfiddle.net/LD4qN/

與你一起更新提琴：http://jsfiddle.net/zpwnL/

來源

2014-07-10 10:16:34 JoseAPL

啊我認爲你沒有更新小提琴，這是我發佈的同一個鏈接。我試圖找出你的，但有點混亂。 – ve1jdramas

箱影現在出現在圖像下，而不是.thumbnail類，我需要在縮略圖下。 – ve1jdramas

連接。內容：hover和IMG：懸停，所以它們激活的同時

回答

相關問題