鼠标点击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 相关文章推荐
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 Javascript
Vue Element plus使用方法梳理
Dec 24 Vue.js
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 获取文件权限函数介绍
2013/07/11 PHP
Yii框架登录流程分析
2014/12/03 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
javascript 数组排序函数
2009/08/20 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
Python3学习urllib的使用方法示例
2017/11/29 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
python global关键字的用法详解
2019/09/05 Python
python实现画出e指数函数的图像
2019/11/21 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
python matlab库简单用法讲解
2020/12/31 Python
python 实现的车牌识别项目
2021/01/25 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
一道SQL面试题
2012/12/31 面试题
企划经理的岗位职责
2013/11/17 职场文书
初三新学期计划书
2014/05/03 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python
python内置模块之上下文管理contextlib
2022/06/14 Python
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技