css - 连接 .content :hover and img:hover, 以便它们同时激活

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

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

谁能指出我正确的方向？

这是我目前拥有的一个 jsfiddle:http://jsfiddle.net/zpwnL/

Answer 1

我会使用父选择器来设置子元素的样式:

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

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

如果元素没有共同的父元素，则必须使用 JavaScript。