鼠标点击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,显示瞬间的边框颜色,对之修改与隐藏实例全部内容了,希望大家多多支持我们~
相关推荐
-
js实现鼠标悬浮给图片加边框的方法
本文实例讲述了js实现鼠标悬浮给图片加边框的方法.分享给大家供大家参考.具体实现方法如下: html代码: <div class="T-s-l fl"> <a href="" class="a1"> <img src="images/11.jpg" width="234" height="368" /> </a><a href=&qu
-
jquery给图片添加鼠标经过时的边框效果
一哥们儿要给图片添加鼠标经过时的边框效果,可惜出发点错了,直接加在了IMG外的A标签上致使 鼠标经过时图片产生塌陷,实则应该将边框控制直接加在IMG标签上即可 错误代码如下:注意红色部分设置 (出发点就错了) 复制代码 代码如下: <html> <head> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></s
-
jQuery实现鼠标经过显示动画边框特效
原效果用addClass 改为slideUp,纯学习 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css.css" rel="external nofo
-
JS实现鼠标滑过显示边框的菜单效果
本文实例讲述了JS实现鼠标滑过显示边框的菜单效果.分享给大家供大家参考,具体如下: <html> <head> <title>JS鼠标滑过显示边框菜单</title> </head> <body> <style> .menulines{ border:1px solid white; } .menulines a{ text-decoration:none; color:red; } </style> <
-
JQuery实现鼠标移动到图片上显示边框效果
复制代码 代码如下: 以下为程序代码:<!DOCTYPE html/> <head> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script> <script type="text/javascript"> $(function() { $(".v&quo
-
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
示例的是项目中的遇到的,要做成的效果是点击该图片按钮,达到切换图片的效果: HTML代码如下: <input class="dBox3Ulimg" type="image" src="img/newselect.png"/> <input class="dBox3Ulimg" type="image" src="img/yesselect.png" style=&quo
-
如何使用python实现模拟鼠标点击
这篇文章主要介绍了如何使用python实现模拟鼠标点击,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 不知道大家在工作中有没有一些工作需要重复的点击鼠标,因为会影响到财务统计报表的关系,我们每个月底月初都要修改ERP中的单据日期,单据多的时候光修改就能让你点鼠标点到手麻.(这里要吐槽一下浪沙软件,别的单据都可以批量修改日期,就是这个移仓单不行,你们研发怎么就这么懒?剩下这么点工作就不完成他?)之前同事有跟我提到过键盘精灵,因为当时负责别的工作,
-
c# 在WebBrowser中用SendMessage模拟鼠标点击
复制代码 代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; using System.Runtime.InteropServices; namespace BrowserMouseClick { public
-
使用JS或jQuery模拟鼠标点击a标签事件代码
复制代码 代码如下: <a id="alink" href="abc.aspx" style="visibility: hidden;">下一步</a> $("#alink").click(); // 触发了a标签的点击事件,但是没有触发页面跳转 document.getElementById("alink").click(); //既触发了a标签的点击事件,又触发了页面跳转 把 &
-
layui radio点击事件实现input显示和隐藏的例子
如下所示: 前端代码 <link rel="stylesheet" href="/static/index/layui/css/layui.css" rel="external nofollow" > <script type="text/javascript" src="/static/index/layui/layui.js" charset="utf-8">
-
基于javascript代码实现通过点击图片显示原图片
废话不多说了,直接给大家贴js实现点击图片显示原图片的代码,具体代码如下所示: function DrawImage(ImgD){ var image = new Image(); image.src=ImgD.src; var width = $(ImgD).attr("width"); var height = $(ImgD).attr("height"); if(width >100 && height>80){ ImgD.widt
-
Unity实现鼠标点2D转3D进行旋转
本文实例为大家分享了Unity实现鼠标点2D转3D进行旋转的具体代码,供大家参考,具体内容如下 代码如下: using UnityEngine; public class GunFollowMouse : MonoBehaviour { public RectTransform UGUICanvas; public Camera mainCamera; //摄像机旋转的缓动速率 private float rotateSpeed = 5; void Start () { } void Updat
-
chrome下判断点击input上标签还是其余标签的实现方法
想要实现的功能:当input框失焦且点击的不是清除键时,执行reset方法重置input样式,当点击清除键时,执行clear方法,清除input内容. 如图 本想通过如下代码来实现 $(".search-input").focusout(function () { if (document.activeElement.className !== 'close-t') {//close-t为清除键类名 $('.search-input').addClass('search-before'
-
基于jQuery插件实现点击小图显示大图效果
本文实例为大家分享了基于jQuery实现点击小图显示大图效果,供大家参考,具体内容如下 显示以下效果: 点击任意一张图片会显示大图: 1.前台界面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="练习.WebForm1" %> <!DOCTYPE html PUBLIC "-/
-
jQuery实现点击小图显示大图代码分享
本文实例讲述了jQuery实现点击小图显示大图效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的点击小图查看大图的代码,适合用于产品展示等环节,便于用户浏览产品细节,是一款非常实用的特效代码. 运行效果图: ----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery实现点击小图显示大图效果代码如下 <head> <title>jQue
随机推荐
- AngularJS的ng-repeat指令与scope继承关系实例详解
- jQuery多媒体插件jQuery Media Plugin使用详解
- JavaScript中使用Math.floor()方法对数字取整
- Centos安装php高版本
- 移动指定文件夹内的全部文件
- 在Struts2中的结果集类型
- JavaScript ES6的新特性使用新方法定义Class
- JS 在数组指定位置插入/删除数据的方法
- PHP生成唯一的促销/优惠/折扣码(附源码)
- ASP.NET中利用DataList实现图片无缝滚动 实例分享
- 给你的asp+ac站点加rss功能
- js 奇葩技巧之隐藏代码
- 利用ActiveX控件InetCtls.Inet在ASP中实现新闻小偷
- asp MYSQL出现问号乱码的解决方法
- jQuery 表单验证扩展(四)
- MySQL无法重启报错Warning: World-writable config file ‘/etc/my.cnf’ is ignored的解决方法
- jQuery实现的简单前端搜索功能示例
- jQuery中 attr() 方法使用小结
- jquery select动态加载选择(兼容各种浏览器)
- Jquery原生态实现表格header头随滚动条滚动而滚动