连接.content:hover和img:悬停，因此它们同时激活

Question

我试图连接这两个悬停类，因此它们同时激活：

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

因此，每当您在内容或图像上悬停时，两个悬停类都会激活。我尝试了很多不同的方法来做这件事，并阅读了一遍，但这似乎比应该的要复杂一些。

谁能给我指明正确的方向？

下面是我到目前为止所做的一些事情：http://jsfiddle.net/zpwnL/

Answer 1

我将使用父选择器对子元素进行样式设置：

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

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

如果元素没有一个公共父元素，则必须使用JavaScript。

Answer 2

您应该为该元素中的一个元素应用:hover，以保持添加选择器也适用于这些

看这把小提琴：http://jsfiddle.net/LD4qN/

更新你的小提琴：http://jsfiddle.net/zpwnL/