鼠标点击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 相关文章推荐
js打印纸函数代码(递归)
Jun 18 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
vue实现简单图片上传
Jun 30 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
php一些公用函数的集合
2008/03/27 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
JavaScript中实现块作用域的方法
2010/04/01 Javascript
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
Python采集腾讯新闻实例
2014/07/10 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
python实现图片插入文字
2019/11/26 Python
python语言是免费还是收费的?
2020/06/15 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
公司户外活动总结
2014/07/04 职场文书
安全例会汇报材料
2014/08/23 职场文书
导游欢送词
2015/01/31 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
降价通知函
2015/04/23 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
就业推荐表院系意见
2015/06/05 职场文书
边城读书笔记
2015/06/29 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
Nginx配置根据url参数重定向
2022/04/11 Servers
Redis高并发缓存架构性能优化
2022/05/15 Redis
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript