Показывать содержимое при наведении курсора на DIV

можно ли показывать содержимое при наведении курсора на DIV. См.изображения

когда я наведу курсор на div, происходит переход, но можно ли показать содержимое внутри зависающего div, т. е. Изображения и т. д.

HTML-код :

<div class="flowingdown">

</div>

CSS3 код :

.flowingdown {
    width:1045px;
    background-image:url(images/vertical_cloth.png);
    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:100px;
}
9
css css3 html mousehover stylesheet

4 ответов

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

<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;
}

Это должно сделать трюк.

не уверен, как вы это сделаете с переходами, но вам нужно будет поставить тот же селектор, по крайней мере.

пример

21

Если, скажем, у вас есть это :

<div class="flowingdown">
    <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}
.flowingdown:hover .something-inside-but-hidden {display:block}

пример jsFiddled здесь

0

Да, это возможно.

но обернуть .flowingdown в пределах div. Inorder, чтобы показать весь контент,

<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.
}

проверить это JSFiddle

0

Я предполагаю, что вы пытаетесь скрыть нижнюю часть фонового изображения, но я только что протестировал этот точный код и он работал отлично:

<html>
<head>
<style>

.flowingdown {
    width:1045px;
    background-image:url(../Pictures/C_2560x1400.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:100px;
}
</style>
</head>
<body>

<div class="flowingdown">

</div>

</body>

это тот же самый точный код, который вы использовали, за исключением того, что я использовал собственное изображение.

Если вы хотите изменить фоновое изображение при наведении, ваш CSS должен быть:

.flowingdown:hover {
    height:100px;
    background-image:url(path.jpg);
}

Дайте мне знать, если я неправильно понял ваш вопрос.

0