css - 悬停时的css或jquery仅显示当前div的隐藏子元素

以下是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内部重复结构的一个单元。

我想要的功能是，当您将鼠标悬停在tweet文本上时，.tweet .text p然后应该显示.last的内容。

我做了以下事情：

.last{
    display: none;
}

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

两个疑问：


您应该只能看到您在其上悬停的元素的.last。
上面的行不通，小提琴是http://jsfiddle.net/EymLT/


谢谢！

最佳答案

您的CSS选择器不正确。首先，.last不是.text的子级，并且p元素不能被悬停，因为它是不可见的。尝试这个：

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

Updated fiddle

关于css - 悬停时的css或jquery仅显示当前div的隐藏子元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18289727/