При попадании курсора в div.item должен slideToggle() его дочерний div.hovered(таким образом, что этот всплывший div располагается полностью поверх родительского div), а когда курсор из div.item выходит, должно произойти обратное:
$('div.item').hover(function () {
$(this).find('div.hovered').slideToggle('fast');});
<div class="item">
<div class="hovered">
content
</div>
content
</div>
|
Код:
|
div#suppliers .item {
float: left;
width: 70px;
height: 52px;
padding: 12px;
font-size: 9px;
position: relative;
}
div#suppliers .hovered {
width: 200px;
height: 50px;
padding: 12px;
margin: -12px 0 0 -12px;
border: 1px solid #eaeceb;
position: absolute;
display: none;
z-index: 9995;
background: #fff;
} |
Но фактически происходит только первая половина желаемого, т.е. когда я убираю курсор с этим слоём, .hovered не сворачивается. А сворачивается, когда ещё раз курсор навожу.
P.S. Как-то можно просто сделать так, чтобы slideToggle происходил не в вертикальной, а в горизонтальной плоскости, или надо подключать jquery interface?
