连接.content：hover和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

您应该为此元素中的元素应用:hover以继续添加选择器也适用于这些

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

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

Answer 2

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

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

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

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