фух, написал))
<html>
<head>
<title>example</title>
<style>
.block
{
overflow: hidden;
}
.over
{
float: left;
}
.item
{
float: left;
margin-left: 10px;
display: none;
}
</style>
</head>
<body>
<div class="block">
<div class="over" group="g1">over</div>
<div class="item" group="g1">block 1</div>
<div class="item" group="g1">block 2</div>
</div>
<div class="block">
<div class="over" group="g2">over</div>
<div class="item" group="g2">block 3</div>
<div class="item" group="g2">block 4</div>
<div class="item" group="g2">block 5</div>
</div>
<div class="block">
<div class="over" group="g3">over</div>
<div class="item" group="g3">block 6</div>
<div class="item" group="g3">block 7</div>
</div>
<script>
function show (dom)
{
var group = dom.getAttribute('group'),
selector = '*[group=' + group + ']';
var doms = document.querySelectorAll(selector);
var time = null;
Array.prototype.forEach.call(doms, function (ths)
{
ths.onmouseover = function ()
{
if (time)
{
clearTimeout(time);
return;
}
Array.prototype.forEach.call(doms, function (ths)
{
if (ths != dom)
ths.style.display = 'block';
});
};
ths.onmouseout = function ()
{
time = setTimeout(function ()
{
time = null;
Array.prototype.forEach.call(doms, function (ths)
{
if (ths != dom)
ths.style.display = 'none';
});
}, 1000);
};
});
}
Array.prototype.forEach.call(document.querySelectorAll('.over'), function (ths)
{
show(ths);
});
</script>
</body>
</html>
|