鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例


Posted in Javascript onDecember 26, 2016

示例的是项目中的遇到的,要做成的效果是点击该图片按钮,达到切换图片的效果:

HTML代码如下:

<input class="dBox3Ulimg" type="image" src="img/newselect.png"/>
<input class="dBox3Ulimg" type="image" src="img/yesselect.png" style="display: none;"/>

JS代码如下:

$(document).ready(function(){
  $(".dBox3Ulimg").click(function(){
    $(".dBox3Ulimg").toggle();
  });
});

点击图片按钮的瞬间的样式如下图:

鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例

但是在点击的图片按钮的瞬间,图片出现了带有淡蓝色的颜色边框,在松开鼠标的瞬间便又消失,为了去掉这瞬间的点击颜色效果,可以通过focus伪类去实现,具体代码如下:

1、去掉(隐藏)边框的颜色

input:focus {
  outline:none;
}

再点击图片按钮的样式,就不会出现上图中的淡蓝色的边框颜色了,也能正常切换图片。

鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例

2、修改边框的颜色

input:focus{
outline:1px solid red;
}

同理,修改边框的颜色为红色,便如下图:

鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例

以上就是小编为大家带来的鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 #Javascript
原生JS实现图片轮播效果
Dec 26 #Javascript
输入框点击时边框变色效果的实现方法
Dec 26 #Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 #Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 #Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 #Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 #Javascript
You might like
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
python生成IP段的方法
2015/07/07 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
linux 下selenium chrome使用详解
2020/04/02 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
python numpy库np.percentile用法说明
2020/06/08 Python
彪马日本官网:PUMA日本
2019/01/31 全球购物
什么是规则表达式
2012/05/03 面试题
关于Java finally的面试题
2016/04/27 面试题
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
工程承包协议书范本
2014/09/29 职场文书
司机岗位职责
2015/02/04 职场文书
飞屋环游记观后感
2015/06/08 职场文书
环保建议书作文400字
2015/09/14 职场文书
小学英语课教学反思
2016/02/15 职场文书
防止web项目中的SQL注入
2021/12/06 MySQL
python接口测试返回数据为字典取值方式
2022/02/12 Python
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS