先举个简单的示例:

机票排序模块,当点击其中一个筛选条件“起飞时间”时通过虚线框的位置可以看到文字所占的区域,而事实上整个按钮都能响应该事件,那给用户造成的错觉就是似乎只有文字部分是可点击区域,这就需要对文字的样式进行合理设置,扩大响应区域,见下图:

继续优化:a:focus { outline: none; } 将虚线框去掉,用户使用起来会比较顺畅,至少不会存在视觉障碍。鉴于IE滤镜消耗性能本示例将其忽略。

由此引申到链接的点击区域应该控制在多大区域内,见下图的“查看明细”和“隐藏明细”:

显然这两个链接的点击区域偏小,文字缩在角落里,鼠标必须触及到文本才有响应,而实际上大多数用户更习惯这一片都属于链接范围,解决方法同上:扩大链接响应区域,看着大气,用着也舒服。下图是调整后的效果:

当链接为整块区域时,目前的 html4 还不支持 inline 嵌套 block 元素,不过未来的 html5 已经支持在 a 标签中嵌套层结构。下图示例的实现方法是给列表加了鼠标手形 li { cursor: pointer; } 以模拟链接,事件响应通过 js 来实现,当可以使用 html5 时就可以自由使用在 a 中嵌套 li,通过伪类 a:hover li { … } 完美实现,包括目前用脚本控制的显示隐藏。

本文作者:admin 转载请注明来自:携程设计委员会