鼠标点击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参考实例 1.0 jQuery的哲学
Apr 07 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
Vue中computed和watch有哪些区别
Dec 19 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中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
常用DOM整理
2015/06/16 Javascript
javascript常用的方法整理
2015/08/20 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
Python中GIL的使用详解
2018/10/03 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
python 实现有道翻译功能
2021/02/26 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
班主任寄语大全
2014/04/04 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
项目建议书范文
2014/05/12 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
微笑服务标语
2014/06/24 职场文书
2014年终个人工作总结
2014/11/07 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL