• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > a标签的bug hover状态不触发 可点区域不可点击

a标签的bug hover状态不触发 可点区域不可点击

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含a标签,hover状态,可点区域等相关知识,佚名 希望在学习及工作中可以帮助到您

度假项目告一段落了,但在项目中遇到的问题却不少,这里挑几个重要的bug或者说失误,来进行说明。

先来看一下有哪几个bug或者失误要分享一下。

a标签不加href属性a标签:hover状态不触发buga标签可点区域不可点击bug

a标签不加href属性

个人觉得都不能称之为bug,但还是拿出来说道说道,因为确实有人这么干,查找问题的时候也花费了点时间。请看demo1

图一

图二

Firefox7、chrome14、safari5、opera10.6、ie8、ie9显示效果如图1,但在鼠标形状上,opera为正常状态(箭头),另外五个为选文字状态(I形状)。ie6/7里面却根本不鸟你,除了title显示出来后,没有其它任何变化,如图2。

也许有人会说,这么明显的错误,一看就看出来了,但是如果我在a:hover{cursor:pointer}一下(也许你没有这么做过),除了ie6/7,其它的都跟正常的链接一下,只有ie6/7,鼠标放上去仍然不可用。demo1-1

解决办法:给a添加href=”"

a标签:hover状态不触发bug

这个bug对我来说,也是第一次遇到,这是在做一个点评相关的模块时遇到的。这个bug只会出现在ie6中(如果你不考虑ie6,请跳过这个bug)。请看demo2

图三

图四

在标准浏览器中,鼠标放到星级上面时,里面的文字会出现(如图3),但是ie6不会产生任何变化(如图4),后来经过同事的指点,加上查找文章,得出一个小结论,当a与a:hover样式不发生变化的时候,ie6会认为没有触发:hover(在demo2中,鼠标放上去后,没有任何的变化),因此也就不能实现demo2中要实现的效果。

图5

解决办法:给a:hover添加border:0,在视觉上没有发生任何变化,但是ie6中,当鼠标放上去后,触发了:hover。里面的span也显示出来了demo2-2(如图5),但新的问题产生了,原来写在span里面的背景没有因为鼠标的离开而隐藏起来(如图6),刚开始以为跟a一样,要有样式的变化,但试了几个属性后,我放弃了,直接把背景写在了a:hover span里面,问题解决(demo2-3)。

虽然问题解决了,但是为什么却不是非常的了解,也请了解的朋友给我留言。在这里先谢过了。另附一个小demo3

a标签可点区域不可点击bug

这个可能不能称之为a的bug,但是还是放在这里来说,反正跟他也有点相关。先看demo4

图7

在图7中,左侧的携程旅行网在非ie6/7的浏览器中,带背景的区域都是可以点击的,但在ie6/7中,只有文字部分可以点击,空白区域的地方却不可以点击。

bug产生原因:在ie6/7中,绝对定位的元素,如果里面的子元素向右浮动,会使定位的这个父元素宽度变成100%,从而覆盖到a的上面,造成不可点击(添加个背景颜色,可以更直观)。

解决办法:即然宽度发生了变化,那就给定位的元素设置个宽度来解决问题。具体请看demo5。

这个bug实在不好来说明,还是直接看代码演示吧,有不明白的请留言。

圣诞节马上就要到了,祝大家圣诞快乐!

您可能想查找下面的文章:

  • a标签有小手状和无小手状css的属性介绍
  • a标签的css样式四个状态LVHA的设计
  • css如何去掉点击a链接带来的虚框
  • css a标签的visied伪类失效原因介绍
  • ie6下a标签的onclick事件不执行问题解决方案
  • a标签的四个css伪类(link、visited、hover、active)样式理解
  • a标签的bug hover状态不触发 可点区域不可点击
  • CSS中a标签样式的“爱恨”原则:定义链接样式的四个伪类
  • 去掉a标签超链接的虚线框的方法
  • 有关于a标签的4个伪类的使用方法

相关文章

  • 2017-08-06a标签的css样式四个状态LVHA的设计
  • 2017-08-06小标签大作用 CSS中zoom:1的使用方法
  • 2017-08-06CSS字体属性全解析
  • 2017-08-06CSS dashed和dotted的区别
  • 2017-08-06HTML设置超链接字体颜色和点击后的字体颜色
  • 2017-08-06使用CSS3来绘制一个月食图案
  • 2017-08-06相对、绝对和固定定位的比较
  • 2017-08-06让页脚紧贴页面底部的CSS代码
  • 2017-08-06纯CSS实现Tab切换标签效果代码
  • 2017-08-06div+css布局中的alpha 不透明度使用说明

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 解决table td中的checkbox无法上下居中的问题
    • Firefox专属hack的写法介绍
    • 背景偏移取图标的实现方法
    • CSS样式的基础学习总结
    • IE6中的position:fixed定位兼容性写法分享
    • CSS框架sass的简单一览
    • 一款利用css3的鼠标经过动画显示详情特效的实例教程
    • 不规则背景墙 CSS实现背景图片不规则的导航菜单
    • CSS伪元素 :before, :after, box-shadow应用
    • li float后IE下有空格

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有