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

Можно ли показывать контент при наведении курсора на DIV. См. Image Показать содержимое при наведении курсора на 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; 
}

источник

2013-07-25 Farhan Afzal

Ваш вопрос очень запутан. Какое переключение происходит. Какой именно вопрос? – AnaMaria

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

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

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

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

Example

источник

2013-07-25 13:12:34 Anpan

Удивительный, сделал трюк. Примут через несколько минут. –

@FarhanAfzal это вариант перехода, если это интересно: http://jsfiddle.net/5Bpur/1/ – Albzi

В качестве дополнительного примечания: вы можете применить любой стиль, который вы хотите таким образом.Единственное требование состоит в том, что для элемента, который вы хотите повлиять, является дочерний элемент (или непосредственный родственник с селектором '+') элемента, который вы наводите. – Anpan

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

<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 here

источник

2013-07-25 13:11:46

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

Но оберните ваш .flowingdown в div. Симметричный показать все содержимое,

<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

источник

2013-07-25 13:15:35 Praveen

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

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

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

источник

2013-07-25 13:26:15 Jacques

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

ответ

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