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 中的一个重复结构单元。

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

我做了以下事情：

.last{
    display: none;
}

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

两个疑惑：

1. 您应该只能看到.last您悬停在其上的元素。

2. 以上不起作用，小提琴是http://jsfiddle.net/EymLT/

谢谢！

Answer 1

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

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

更新的小提琴

Answer 2

用这个替换你的最后一个样式：

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

Answer 3

您可以~在 CSS中使用

演示http://jsfiddle.net/kevinPHPkevin/EymLT/4/

.last{
    display:none;
}

.text:hover ~ .last{
    display : block;
}

如果您将 my 替换~为>它将更兼容浏览器。确保只有孩子被选中，>因此您可以使用父 div 作为悬停目标。

.last{
    display:none;
}

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