<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.uli{width:875px;height:auto;margin-right:7px}
.uli li{width:173px;height:73px;border:thin solid #ececec;display:block;float:left;position:relative}
.uli li:hover{border-color:#f00;z-index:9}
</style>
<script type="text/javascript" src="http://s0.qhimg.com/lib/jquery/183.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function hoverBorder(lineNum){
var test = $('.uli li');
var i,
j ,
colNum = Math.ceil(test.length/lineNum);
for(i=0;i<colNum;i++){
for(j=0;j<lineNum;j++){
test.eq(j + lineNum * i).css({
top:function(){return - i},
left:function(){return - j}
});
}
}
}
hoverBorder(5);
});
</script>
</head>
<body>
<ul class="uli">
<?php
for($n=0;$n<25;$n++){
echo '<li>This is '. $n .'</li>';
}
?>
</ul>
</body>
</html>
鼠标hover事件-边框变色
原创
©著作权归作者所有:来自51CTO博客作者雨随影逝的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:PHP输出验证码(绘画技术)
下一篇:我的友情链接
![](https://ucenter.51cto.com/images/noavatar_middle.gif)
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
有趣的css - 边框动效按钮
交互感比较强的一个动效按钮。
动效设计 交互设计 ux/ui 动效按钮 css -
DIV+CSS 圆角边框
利用DIV+CSS生成圆角边框,在很多情况下都会用到,目前DIV+CSS的圆角边框,一种是利用CSS3,一种角是圆角非常方便,代码如下...
CSS IE webkit Java Firefox -
简单的CSS设置div边框样式
今天工作干完了,想到前几天一
css html div 边框 f5 -
CSS hover box
隐藏!
hover box CSS transition css