jquery的简单实现高亮效果
来源：互联网 发布：淘宝怎么看之前的评论 编辑：程序博客网 时间：2024/04/29 20:53
实现高亮效果有两种方式，一个是利用css()改变背景颜色，一个是addClass()添加类
1.css()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<script src="jquery.js"></script>
<style>
.div{
height: 100px;
width: 100px;
background: #dddddd;
float:left;
margin-right: 10px;
text-align: center;
}
.div ul{list-style: none;display: inline;font-size: 30px;}
body{background: black;}
</style>
<script>
//实现高亮显示块
$('document').ready(function(){
$(".div").hover(function(){
$(this).css({"background":"#eeeeee",}); //鼠标放上去 的背景,css()没有重设的属性则继承原先的css属性
},function(){
$(this).css({"background":"#dddddd"}) //鼠标放l离开 的 背景
});
});
</script>
</head>
<body>
<div class="div">
<ul>
<li>111111111</li>
<li>111111111</li>
<li>111111111</li>
<li>111111111</li>
</ul>
</div>
<div class="div">
<ul>
<li>111111111</li>
<li>111111111</li>
<li>111111111</li>
<li>111111111</li>
</ul>
</div>
<div class="div">
<ul>
<li>111111111</li>
<li>111111111</li>
<li>111111111</li>
<li>111111111</li>
</ul>
</div>
</body>
</html>
2.addClass()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<script src="jquery.js"></script>
<style>
.div{
height: 100px;
width: 100px;
background: #000000;
float:left;
margin-right: 10px;
text-align: center;
font-size: 30px;
}
.div ul{list-style: none;display: inline;}
.highLight{background: #eeeeee;height: 150px;width: 150px;border:1px solid black;padding: 5px;}
</style>
<script>
$('document').ready(function(){
$('body').on('mouseover','.div',function(){ //利用on()事件委托方式，可以监管多种事件动作
$(this).addClass('highLight');//利用addClass()方法添加类,在新类中没有重新定义的属性仍然使用旧类的效果
});
});
</script>
</head>
<body>
<div class="div">
<ul>
<li>111111111</li>
<li>111111111</li>
<li>111111111</li>
<li>111111111</li>
<div class="a"></div>
</ul>
</div>
<div class="div">
<ul>
<li>111111111</li>
<li>111111111</li>
<li>111111111</li>
<li>111111111</li>
</ul>
</div>
<div class="div">
<ul>
<li>111111111</li>
<li>111111111</li>
<li>111111111</li>
<li>111111111</li>
</ul>
</div>
</body>
</html>
- jquery的简单实现高亮效果
- 高斯模糊效果的简单实现
- 高斯模糊效果的简单实现
- Jquery中幻灯片效果的简单实现
- 使用jquery实现简单的拖动效果
- Jquery实现简单的图片滚动效果
- jQuery--元素抖动效果的简单实现
- JQuery简单实现菜单的点击效果
- Jquery实现简单的滚动刷新效果
- jquery实现简单的图片翻转效果
- 使用jQuery实现简单的分页效果
- 简单的jquery效果
- 使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果
- 高仿google now效果的呼吸按钮简单实现
- 使用JS实现简单的表格的增加删除全选反选以及高亮效果
- 实现搜索关键字高亮的效果
- JQuery实现的 超简单的菜单缩放效果
- jquery+css实现简单的窥镜效果
- BaseAdapter
- HTTP协议简介
- 报错：java.lang.IllegalArgumentException
- BZOJ 1611: [Usaco2008 Feb]Meteor Shower流星雨
- 获取Jenkins项目名称
- jquery的简单实现高亮效果
- Android服务之Service
- POJ 2513 Colored Sticks
- 第十四周工作报告（2014~5.26-6.1）
- YL-236点阵汉字LED显示C语言
- UltraEdit破解方法最强收录
- 工作队列 工作线程 工作(work_struct)
- oracle Control Files 杂谈-2
- 【解题报告】uva10192_Vacation（假期, dp, LCS）
