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 相关文章推荐
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
JavaScript之cookie技术详解
Nov 18 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
vue-cli配置flexible过程详解
Jul 04 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实现监听事件
2013/11/06 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
php程序内部post数据的方法
2015/03/31 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
php之可变函数的实例详解
2017/09/13 PHP
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
PyMongo安装使用笔记
2015/04/27 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
大学生找工作求职信
2014/07/09 职场文书
办公室岗位职责范本
2015/04/11 职场文书
律政俏佳人观后感
2015/06/09 职场文书
看雷锋电影观后感
2015/06/10 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
python数字类型和占位符详情
2022/03/13 Python