Показать DIV при наведении курсора на другой DIV

У меня есть этот небольшой код http://jsfiddle.net/largan/2n2Lf/3/Показать DIV при наведении курсора на другой DIV

<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_text показать в soc_button».

Я попытался решения на некоторых подобных сообщений здесь, но ничего не получалось.

Благодаря

источник

2014-05-02 lStoilov

Вы проверили это сообщение? http://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css – jamez14

Возможный дубликат [Есть ли родительский селектор CSS?] (http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) –

Я добавил (для правого выровненного текста)

.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

источник

2014-05-02 15:35:06 jamez14

Это сработало отлично, спасибо! – lStoilov

Конечно! Другой вариант для центра текста: http://jsfiddle.net/2n2Lf/14/ – jamez14

Я также пытаюсь добавить некоторое затухание ** http: //jsfiddle.net/largan/2n2Lf/15/**, но это не хочет работать. Есть идеи? Я получил функциональность из этого примера ** http: //jsfiddle.net/ynUKx/1/** – lStoilov

Ok, ответы правильны. Но, чтобы иметь лучшее выравнивание, вы можете превратить его в display:table-cell, чтобы текст был выровнен по вертикали.

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

Конечно, вы должны добавить display:table; в soc_button класс.
Check out: http://jsfiddle.net/2n2Lf/13/

источник

2014-05-02 15:44:22 LcSalazar

Показать DIV при наведении курсора на другой DIV

ответ

Смежные вопросы