HTML:
<ul class="clients">
<li>
<div class="over left">Description</div>
<div class="inner">Image</div>
</li>
</ul>
CSS:
.clients { margin-right: -20px; }
.clients li {
float: left;
width: 128px;
height: 120px;
margin: 0 20px 20px 0;
border: 1px solid #c2c2c2;
}
.clients .over {
display: none;
position: absolute;
width: 250px;
font-size: 11px;
line-height: 16px;
background: #ecf5fb;
margin: 3px 0 0 3px;
padding: 18px;
z-index: 25;
}
.clients .right { margin: 3px 0 0 -161px; }
.clients .inner { width: 128px; height: 120px; overflow: hidden; }
所以,我们有一个浮动方块列表和一个弹出块,它们都有绝对位置。
JS:
jQuery(function($) {
$(".clients li").bind('mouseover mouseout',function(){$(this).find("div.over").toggle()});
});
如果结束 - 显示,否则 - 隐藏。很好,但它必须更高级,我们应该捕获一个偏移量并为.over块提供一个类:
- 如果从右侧(浏览器窗口的角)偏移小于150像素,则为块添加类“right” 。
.over
- 如果从右侧偏移超过150 像素 -为块添加类“左” 。
.over
我们该怎么做?