Question

我有这个小代码http://jsfiddle.net/largan/2n2Lf/3/

<div class=socialicons>
    <div class=soc_button>
        <img class=socialicons_effect src=http://www.mangoresort.com/images/icons/pinterest.png width=48 alt="Pinterest">
        <div class=soc_text>Follow us on Pinterest</div>
    </div>
</div>

我想要实现的是当你将鼠标悬停在图标（soc_button）上时，在soc_button中显示的soc_text“。

我在这里尝试了一些类似帖子的解决方案，但没有任何效果。

由于

Answer 1

我添加了（对于右对齐的文字）

.soc_text {
    display:none;
    text-align:right;
    float:right;
    margin-top: 15px;
    margin-right: 20px;
}
.soc_button:hover .soc_text {
    display: inline;
}

<强> jsfiddle

或者对于居中的文字......

.soc_text {
    display:none;
    text-align: center;
    padding-top: 15px;
}
.soc_button:hover .soc_text {
    display: block;
}

<强> jsfiddle

Answer 2

好的，答案是正确的。但是，为了更好地对齐，您可以将其转换为display:table-cell，文本将垂直对齐。

.soc_button:hover .soc_text
{
    display:table-cell;
    vertical-align: middle;
}

当然，您必须将display:table;添加到soc_button类看看：http://jsfiddle.net/2n2Lf/13/

在另一个DIV上悬停时显示DIV

2 个答案: