：nth-​​child：hover仅选择子项

Question

我有一个新闻页面（.up5）。项（第1-3条）很大，但是从第4条（：nth-​​child 3n + 4/5/6）开始，我想连续拥有3个项目。当我将鼠标悬停在文章上时，这些较小的项目应会获得悬停效果（添加彩色框架）。问题是：每个子项目（标题，部分，底部边框等）都悬停了，但没有整个文章。

    div.up5 :nth-child(3n+4), div.up5 :nth-child(3n+6) {
        display: inline-block;
        width: 32%;
        vertical-align: top;
        text-align: justify;
    }
    div.up5 :nth-child(3n+5) {
        display: inline-block;
        width: 31%;
        vertical-align: top;
        text-align: justify;
        margin: 0 2% 0 2%;
    }
    div.up5 :nth-child(3n+4) :hover, div.up5 :nth-child(3n+5) :hover, div.up5 :nth-child(3n+6) :hover {
        background-color: #2A3D91;
        color: #fff;
        padding: 1em;
        margin: -1em;
    }

提琴：https://jsfiddle.net/broozar/fzow75mp/2/

该问题最容易在右下角的“ Ornaresuspississe”文章中看到。