jquery给图片添加鼠标经过时的边框效果


Posted in Javascript onNovember 12, 2013

一哥们儿要给图片添加鼠标经过时的边框效果,可惜出发点错了,直接加在了IMG外的A标签上致使 鼠标经过时图片产生塌陷,实则应该将边框控制直接加在IMG标签上即可
错误代码如下:注意红色部分设置 (出发点就错了)

<html> 
<head> 
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#box a").mouseover(function(){ 
$(this).css("border","1px solid red"); 
}); 
$("#box a").mouseout(function(){ 
$(this).css("border","none"); 
}); 
}); 
</script> 
<style> 
#box a{ display:block; z-index:1000; width:98px; height:98px;} 
</style> 
</head> 
<body> 
<div id="box" style="width:100px; height:100px;"> 
<a href="#"><img src="erwm.png" border="0" width="99" height="99"/></a> 
<a href="#"><img src="erwm.png" border="0" width="99" height="99"/></a> 
</div> 
</body> 
</html>

修改后的正确设计思路:红色部分为调整后的设置
<html> 
<head> 
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#box img").mouseover(function(){ 
$(this).css("border","1px solid red"); 
}); 
$("#box img").mouseout(function(){ 
$(this).css("border","none"); 
}); 
}); 
</script> 
<style> 
#box a{ display:block; z-index:1000; width:98px; height:98px;} 
</style> 
</head> 
<body> 
<div id="box" style="width:100px; height:100px;"> 
<a href="#"><img src="erwm.png" border="0" width="99" height="99"/></a> 
<a href="#"><img src="erwm.png" border="0" width="99" height="99"/></a> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
用javascript操作xml
Nov 04 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
Three.js基础学习教程
Nov 16 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
vue实现底部菜单功能
Jul 24 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 #Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 #Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 #Javascript
jquery 模板的应用示例
Nov 12 #Javascript
jQuery 无刷新分页实例代码
Nov 12 #Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 #Javascript
JS实现遮罩层效果的简单实例
Nov 12 #Javascript
You might like
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
php截取视频指定帧为图片
2016/05/16 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
Python根据服务获取端口号的方法
2019/09/25 Python
python验证码图片处理(二值化)
2019/11/01 Python
Python reduce函数作用及实例解析
2020/05/08 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
网络编辑职责
2014/03/01 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
精彩的广告词
2014/03/19 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
长城导游词400字
2015/01/30 职场文书
升职自我推荐信范文
2015/03/25 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python
Golang日志包的使用
2022/04/20 Golang