css - ホバー時のcssまたはjqueryは、現在のdivの非表示の子要素のみを表示します

Question

以下は、私のhtmlページ内で繰り返されているhtml構造です。

<article class="tweet-inner"> 
    <div class="tweet">
        <div class="text">
            <p>Coming down! Time for Croation BBQ </p>
        </div>

        <p class="last"> 
            <span class="pull-right">
                <small> Hello this is first text </small>
                <small> Hello this is second text </small>
            </span>
        </p>
    </div>
</article>

上記は、HTML 内の繰り返し構造の 1 つの単位です。

私が欲しい機能は、ツイートのテキストにカーソルを合わせると、.tweet .text pその内容が.last表示されることです。

私は次のことをしました：

.last{
    display: none;
}

.tweet .text p:hover .last{
    display: block;
}

2つの疑問:

1. .lastホバリングした要素のみが表示されるはずです。

2. 上記は機能しません。フィドルはhttp://jsfiddle.net/EymLT/です

ありがとう！