去掉a标签和按钮加背景图片虚线/阴影完美解决方案
作者：佚名
字体：[ ] 来源：互联网 时间：02-26 16:45:14
当点击一个a标签更换验证码，点击后a标签上有个阴影部分，非常影响美观于是搜集了一些整理方法，比较实用，今天正好遇到。故记录于此。知识要靠一点一点积累，感兴趣的你可以参考下
当用户注册都会点击一个a标签更换验证码。当点击后a标签上有个阴影部分。对于喜欢美观的同学却不可容忍！
这是什么原因呢？原来是a标签的href属性惹的祸。
1、仅仅是a标签
我了解的有两种解决办法
其一：对症下药。既然是href引起的。那就去掉href属性
当我们用href=javascript:RefreshCode();只是更新验证码。并没有跳转页面。代码如下:&ahref="javascript:RefreshCode();"class="yellow"&看不清楚？换个图片&/a&所以可以去掉href后，给a标签加上onclick事件，调用更新验证码函数即可代码如下:&aonclick="RefreshCode()"class="yellow"&看不清楚？换个图片&/a&其二：退一步。求同存异。既然你想用href属性。好吧。那我再给你加个事件：onfocus
只要修改一下也可以完美去掉 给a标签加个onfocus=&this.blur()&
当然。如果你想让a标签没有下划线。则：style=&text-decoration: none&代码如下:&a href="javascript:RefreshCode();"class="yellow"onfocus="this.blur()"&看不清楚？换个图片&/a&修改完成后的效果
而在FF等浏览器中则相对比较容易，直接给标签 a 定义样式 outline:就可以了，即：代码如下:a{ outline: }当然这仅仅是去掉单个。如果页面有多个a标签那岂不要挨个挨个添加onfocus事件吗？
当然不是。我们可以在页面加载的时候。通过:window.document.links.length(此处window可以省略)来获取页面所有的a标签。然后遍历注册事件。代码如下:&scripttype="text/javascript"&window.onload=function(){for(var i=0; i&document.links. i++)document.links[i].onfocus=function(){this.blur()}}&/script&2、给button加背景图片：
另为如果你给按钮加了背景图片。会有阴影。
也可以用相同的办法实现代码如下:&asp:Button ID="imgBtnReg" runat="server"onfocus="this.blur()" OnClientClick="return chk_reg();"OnClick="imgBtnReg_Click" Text="确认提交"/&&input type="submit"id="btnReg" value="注册" name="regist" onfocus="this.blur()"onclick="return checkAll()" style="background-image:url('image/btn.jpg')"/&修改后效果：
3、如果给img加a标签,那么给a标签加onfocus的同时还要设置img的border属性：border=0代码如下:&a href="#none"onfocus="this.blur()"&&img style="border:0px"&&/a&如果你页面既有a标签。又有button。那你可以将其封装成一个函数代码如下:function fHideFocus(tName){aTag=document.getElementsByTagName_r(tName);for(i=0;i&aTag.i++)aTag.hideFocus=//for(i=0;i&aTag.i++)aTag.onfocus=function(){this.blur();};}当前是添加一个hidefocus的属性，它的值是一个布尔值，如hideFocus=true。也可省略赋值直接hideFocus。代码如果没有hideFocus,那么鼠标点击该超链接，则外面出现一个虚线框，即为聚焦。而使用了hideFocus则不会有虚线框。
注释掉的句子是添加onfucus=this.blur();效果相同。然后调用fHideFocus(&A&);即可把a的虚线框去掉通过传递不同的参数 可以去掉不同的虚线框比如&BUTTON&可以去掉button的虚线框，但要记住参数要用大写字母
A. map area内链接如何消除链接虚线？这是一个观念上的错误，其实应该在所在map的图片上加以控制，而不是在area内，参考传统办法B. 关于onFocus代码如下:&a href=".cn/s/articlelist__0_1.html"onfocus="this.blur()"&&img style="border:0px"&&/a&其中，onfocus是设置鼠标焦点事件的东西，这个可以用，也可以不用，不过为了让更多的浏览器识别的话，建议采用；border=0这个才是去除虚线框的关键所在（在网上看到大部分人都是用onfocus=&this.blur()&来消除虚线框，但有的时候，仅仅用这一句是不能消除的）
对于牛人来说知识点已是很陈旧。但对于刚接触的朋友却是及时雨，今天正好遇到。故记录于此。知识要靠一点一点积累。
大家感兴趣的内容
12345678910
最近更新的内容CSS里鼠标点击div里的LI A时加上背景图片_百度知道
CSS里鼠标点击div里的LI A时加上背景图片
CSS里面没有点击事件，只能控制鼠标移入的时候显示！小案例：&!doctype&html&&html&&&&&&head&&&&&&&&&&meta&charset=&utf-8&&&&&&&&&&&title&CSS里鼠标点击div里的LI&A时加上背景图片&/title&&&&&&&&&&style&type=&text/css&&&&&&&&&& div:hover&a{background:&url(img/5.jpg);}&&&&&&&&&/style&&&&&&/head&&&&&&body&&&&&&&&&&div&&&&&&&&& &a&href=&&&百度知道&/a&&&&&&&&&&/div&&&&&&/body&&/html&案例截图：为进入案例截图：进入
其他类似问题
为您推荐：
提问者采纳
用的是a:visited但是这个伪类的效果是;current&quot，可以用a;this&).addClass(&quot:hover这个伪类鼠标点击不松开你这个效果，先把有current这个类的LI的current类去掉，是你要切换的背景图片第二步.click(function(){ $(&quot!}
/，可以用a;$(&quot，单纯用CSS控制不成：给你的ul 加上id=menu$(&quot:active被点击过的链接倒是有点像你说的那种.current&点击LI后;&#47，所有被点击过的链接都显示a.removeClass(&quot，就是让它不再有那个背景图片，在COOKIE不清除的情况下;);)，这个他就有了current的样式了;)，点击可以加个背景：CSS里面加一个类
current { background，然后为你当前点击的这个LI加上current这个类。鼠标经过;current&});定义current样式，页面中。你这个明显是一个导航;/)，要是一个背景切换的效果;/#menu li&quot，应该用JS动画做JQuery也很好实现第一步:url(你图片的路径) no-repeat 0 0 :visited中的样式
其他3条回答
。，函数里面定义给鼠标获过的LI定义上一个
css的类。，，不支持hover。天杀的IE，。，获取到全部UL下的全部LI。。。就可以了，然后定义一个鼠标滑过的一个
函数，，然后鼠标移开后。，在给该LI的CSS类去掉。建议你用JS来实现，首先
这个只能移上去 加背景图或背景色，不过也可以在你的a链接跳转后在新的页面的a上给它个class定义背景色，因为你的链接跳转后页面刷新了
用js也达不到你的效果
如何用CSS样式来实现当鼠标点击DIV里的li时会出现另一张背景图猾趋绘芹后匀娱你三赖功浓只梦基
鼠标点击的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁html中的a标签定义了href指向123.jpg，怎么让这个a标签不能被点击呢。图片路径必须存在_百度知道
html中的a标签定义了href指向123.jpg，怎么让这个a标签不能被点击呢。图片路径必须存在
jpg.jpg&30&img src=123;a&gthtml中的a标签定义了href指向123。图片路径必须存在，怎么办呢;30&这里的123是同一张图片.jpg w=&/&lt。img限定大小为30像素; h=&quot。大致是这样的。这时候我不想让a能够点击，鼠标划过img的时候会在右侧显示a指定的图片:&lt，怎么让这个a标签不能被点击呢;&a href=123;&lt，也就是原图
提问者采纳
然不想让a标签被点击，a标签的href属性其实也没什么意义，那应该可以不用a标签吧，把它用其他标签替换不行吗，完全可以用其他标签替代嘛？不点击的话
问题是js文件里指定了A标签的href路径为图片src路径，而我不懂js不知道怎么改，
你的意思是鼠标经过缩略图的时候，右侧显示大图吗？这样完全不需要js啊，用css就可以实现。
好呀好呀，求解
&div&id=&test&& &div&href=&&&&img&src=&xxx.jpg&&width=30px&&/div& &div&id=&test2&&
&img&src=&xxx.jpg&& &/div&&/div&以上是HTML部分，图片地址换成自己的，以下是css部分：#test{position:&width:30}#test2{left:30top:0;position:display:}#test:hover&#test2{display:}
提问者评价
太给力了，你的回答完美地解决了我的问题，非常感谢！
其他类似问题
为您推荐：
href的相关知识
其他1条回答
可以使用js阻止a标签的默认事件
我不会JS，完全小白啊
有没有其他方法能够替代这样的效果呢，我就是要鼠标划过缩略图的时候在旁边显示原图，原图浮动，不能被其他层遮挡，原图和缩略图是同一张图片，缩略图限定大小
不只a标签有hover伪类，其他标签也有。你可以直接给img标签设置：hover来实现你的效果。不过好像ie低版本不支持。
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁CSS鼠标经过DIV换背景图的问题_百度知道
CSS鼠标经过DIV换背景图的问题
使用CSS :hover 伪类可以达到这个效果。定义和用法　　:hover 选择器用于选择鼠标指针浮动在上面的元素。　　提示：:hover 选择器可用于所有元素，不只是链接。　　提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。　　注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。实例div{background-color:}div:hover{&background-color:}/*当鼠标悬浮到div上方是，将背景颜色更改为黄色*/
其他类似问题
为您推荐：
提问者采纳
请问你用的触发事件是onmousemove还是onmouseover,估计是用了onmousemove吧，改成onmouseover就行了
你好，我用的就是onmouseover&div id=&sucen& onmouseover=&style.backgroundImage= 'url(img/bg2.gif)';&
onmouseout= &style.backgroundImage='url(img/bg1.gif)';&&&a href=&#&&这里是文字内容&/a&&/div&
这样的话，因为每次都要下载图片，所以中间会有一段时间出现空白，即使有缓存，那也会出现这种情况；最好就这样：定义两个样式.style1{background-image:url(img/bg2.gif);}.style2{background-image:'url(img/bg1.gif);}然后&div id=&sucen&
onmouseover=&this.className='style1'&
onmouseout= &this.className='style2'&&&a href=&#&&这里是文字内容&/a&&/div&
提问者评价
虽然没用到你的方法，但是仍然感谢你的耐心回答，我自己已经搞定，有时间可以交流下～
背景图的相关知识
其他3条回答
背景要固定宽高2、css要加这一句，display1
你好，不管用
用图片位移就可以了,
&style type=&text/css&&.a1{ background:url(1.gif) no- width:80 display:}.a2{ background:url(2.gif) no- width:80 display:}&/style&&/head&&body&
&div class=&a1& onmouseover=&this.className='a2'& onmouseout=&this.className='a1'&&
liuxingyu&!--文本内容在此输入--&
&/div&&/body&
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁