鼠标点击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,显示瞬间的边框颜色,对之修改与隐藏实例全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • 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实现鼠标经过显示动画边框特效

    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

  • 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

  • jquery给图片添加鼠标经过时的边框效果

    一哥们儿要给图片添加鼠标经过时的边框效果,可惜出发点错了,直接加在了IMG外的A标签上致使 鼠标经过时图片产生塌陷,实则应该将边框控制直接加在IMG标签上即可 错误代码如下:注意红色部分设置 (出发点就错了) 复制代码 代码如下: <html> <head> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></s

  • JS实现鼠标滑过显示边框的菜单效果

    本文实例讲述了JS实现鼠标滑过显示边框的菜单效果.分享给大家供大家参考,具体如下: <html> <head> <title>JS鼠标滑过显示边框菜单</title> </head> <body> <style> .menulines{ border:1px solid white; } .menulines a{ text-decoration:none; color:red; } </style> <

  • 鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例

    鼠标点击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上标签还是其余标签的实现方法

    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插件实现点击小图显示大图效果

    本文实例为大家分享了基于jQuery实现点击小图显示大图效果,供大家参考,具体内容如下 显示以下效果: 点击任意一张图片会显示大图: 1.前台界面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="练习.WebForm1" %> <!DOCTYPE html PUBLIC "-/

  • jQuery实现点击小图显示大图代码分享

    jQuery实现点击小图显示大图代码分享

    本文实例讲述了jQuery实现点击小图显示大图效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的点击小图查看大图的代码,适合用于产品展示等环节,便于用户浏览产品细节,是一款非常实用的特效代码. 运行效果图:    ----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery实现点击小图显示大图效果代码如下 <head> <title>jQue

随机推荐