Показывать контент при наведении HTML + CSS

Вариант 1:

Предположим, что у вас есть следующая разметка:

<div id="parent">
    Some content
    <div id="hover-content">
        Only show this when hovering parent
    </div>
</div>

CSS:

#hover-content {
    display:none;
}
#parent:hover #hover-content {
    display:block;
}

Результат:

Видимый контент
Показывать только при наведении указателя мыши

 

Вариант 2

<div style="width: 200px; height:300px;">
    <div class="flowingdown"></div>
</div>

CSS:

.flowingdown {
    width:1045px;
    background-image:url(http://i.imgur.com/hHUa9Ty.jpg);
    height:50px;
    float:left;
    margin-top:2px;
    margin-bottom:2px;
    border-radius:0 0 55px 55px;
    transition: height 1s;
    -webkit-transition: height 1s;
}
.flowingdown:hover {
    height:100%; //Inorder to show the entire content within the parent.
}

Результат:

 

Вариант 3

<div class="flowingdown2">
    <div class="something-inside">
        something-inside
    </div>
    <div class="something-inside-but-hidden">
        something-inside-but-hidden
    </div>
</div>

CSS

.something-inside-but-hidden {display:none}
.flowingdown2:hover .something-inside-but-hidden {display:block}

Результат:

Видимый контент
Показывать только при наведении указателя мыши




Добавить комментарий


Защитный код
Обновить