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 相关文章推荐
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
js数组去重的hash方法
Dec 22 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
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
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
php 无限级 SelectTree 类
2009/05/19 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
JQuery 常用操作代码
2010/03/14 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
css配合jquery美化 select
2013/11/29 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python中的类学习笔记
2014/09/23 Python
python检测远程端口是否打开的方法
2015/03/14 Python
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
python集合删除多种方法详解
2020/02/10 Python
tensorflow常用函数API介绍
2020/04/19 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
印尼旅游网站:via
2017/11/12 全球购物
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
仓库管理员岗位职责
2014/03/19 职场文书
勤俭节约倡议书
2014/04/14 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
公司食堂管理制度
2015/08/05 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python