鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
更新时间：2016年12月26日 09:53:55 投稿：jingxian
下面小编就为大家带来一篇鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
示例的是项目中的遇到的，要做成的效果是点击该图片按钮，达到切换图片的效果：
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();
});
});
点击图片按钮的瞬间的样式如下图：
但是在点击的图片按钮的瞬间，图片出现了带有淡蓝色的颜色边框，在松开鼠标的瞬间便又消失，为了去掉这瞬间的点击颜色效果，可以通过focus伪类去实现，具体代码如下：
1、去掉（隐藏）边框的颜色
input:focus {
outline:none;
}
再点击图片按钮的样式，就不会出现上图中的淡蓝色的边框颜色了，也能正常切换图片。
2、修改边框的颜色
input:focus{
outline:1px solid red;
}
同理，修改边框的颜色为红色，便如下图：
以上就是小编为大家带来的鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例全部内容了，希望大家多多支持脚本之家~
相关文章
mysql 是非持继连接函数而 mysqli 是永远连接函数。也就是说 mysql 每次链接都会打开一个连接的进程而 mysqli 多次运行 mysqli 将使用同一连接进程,从而减少了服务器的开销。2010-05-05
Layui框架的table.render方法是用于渲染表格的核心功能,通过配置对象定义表格样式、列和数据源,cols数组中的每个对象通过field属性与数据源绑定,指定要显示的数据字段,本文给大家介绍Layui table.render的使用,感兴趣的朋友一起看看吧2024-09-09
ECMAScript5 新增了十个数组方法，这些方法只有在ie9及以上浏览器中可以被使用，下面是对于这些方法的模拟实现简单介绍下，需要的朋友参考下2017-03-03
在这篇文章中给大家分享了关于JavaScript实用代码小技巧的相关内容，有兴趣的朋友们可以参考学习下。2018-08-08
bootstrap-closable-tab可实现关闭的tab标签页插件
这篇文章主要为大家详细介绍了bootstrap-closable-tab可实现关闭的tab标签页插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
轮播停留与无线滚动十分类似，都是利用属性及变量控制移动实现轮播。下面通过本文给大家分享JavaScript轮播停留效果的实现思路，感兴趣的朋友一起看看吧2018-05-05
这篇文章主要介绍了微信小程序使用自定义组件导航实现当前页面高亮，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要介绍了JavaScript类继承及实例化的方法,较为详细的分析了javascript扩展类、实例化类及类对象与成员函数的使用技巧,需要的朋友可以参考下2015-07-07
这篇文章主要为大家介绍了JavaScript常见事件源与事件流的获取方法及解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
JavaScript使用链式方法封装jQuery中CSS()方法示例
这篇文章主要介绍了JavaScript使用链式方法封装jQuery中CSS()方法,结合具体实例形式分析了JS采用链式操作方法封住jQuery中连缀操作实现css()方法的相关技巧,需要的朋友可以参考下2017-04-04
最新评论