开发者社区> 天外归云> 正文

关于友好性测试中鼠标样式的修改

2015-07-07 895

简介： 在日常的界面测试中，我们一定会有这样的CheckPoint：鼠标移到可点击标识的上方时是否变为小手。上图中的鼠标样式是错误的，要想修改成小手我们需要对应的找到他所对应页面元素的CSS样式并做修改（添加红字部分）： div[id$='icmbx'] { display: inl...

+关注继续查看

在日常的界面测试中，我们一定会有这样的CheckPoint：鼠标移到可点击标识的上方时是否变为小手。

上图中的鼠标样式是错误的，要想修改成小手我们需要对应的找到他所对应页面元素的CSS样式并做修改（添加红字部分）：

div[id$='icmbx'] {
    display: inline-block;
    border: 1px solid #bfbfbf !important;
    /*width: 603px;*/
    width:559px;
    height: 48px;
    margin-left: 20px;
    cursor: pointer;
}

这样修改后，鼠标移到输入框上方时就变成小手啦：

但是当我们把鼠标移到旁边的小图案（或下三角箭头）上时，发现问题并没有完全改好：

这是因为这个框框里有多层div嵌套导致的：

要想解决这个问题需要继续修改CSS样式，添加如下的代码，让外层div中所有嵌套在内的div都能够继承外层div的CSS样式：

div[id$='icmbx']>div{cursor:pointer}

于是问题就彻底改好了，

如果不加上最后一行代码的话，这个bug就不算彻底改好。当嵌套的div层数过多时，测试的疏漏会导致bug隐藏难以发现，所以在修改bug的时候一定要想到嵌套的情况以才能节省时间，避免bug被reopen。

div[id$='icmbx'] {
    display: inline-block;
    border: 1px solid #bfbfbf !important;
    /*width: 603px;*/
    width:559px;
    height: 48px;
    margin-left: 20px;
    cursor: pointer;
}
div[id$='icmbx']>div{cursor:pointer}

记录一下这个方法，当做经验积累。

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

前端开发

测试修改

开发者社区 > 开发与运维 > 文章

云迁移中心

作者高分内容

更多

在Jenkins上做一个定时闹钟 1757 Python3在指定路径下递归定位文件中出现的字符串 1429 Python玩转单链表——逆转单向链表pythonic版 1756 备份Android机上的照片 1056 Python3下requests库发送multipart/form-data类型请求 3670

相关文章

erabbit

网页设计中期尝试实时修改背景测试

网页设计中期尝试实时修改背景测试

24 0

游客5m6wdh6ebwgya

测试关于索引的操作- 修改索引

测试关于索引的操作- 修改索引

22 0

游客bjb4hunze7yji

【SSM框架】测试修改.删除.查询功能

1.创建sqlSession工具类 2.测试修改功能 3.测试删除功能 4.测试查询功能

71 0

游客pxprrm2iipsfu

测试圈相亲平台开发流程（16）：保存修改

测试圈相亲平台开发流程（16）：保存修改

42 0

jerrywangsap

SAP Fiori Elements 在本地测试模式下如何修改 List Report 里字段标签和图标

通过 Jerry 这篇文章在没有任何前端开发经验的基础上, 创建第一个 SAP Fiori Elements 应用介绍的步骤，创建一个简单的 SAP Fiori Elements 应用。

56 0

游客bvgjrtmt2xauu

前端，测试如何修改后端接口返回的响应数据

前端，测试如何修改后端接口返回的响应数据

495 0

honeymoose

Confluence 6 升级自定义的站点和空间仔细测试你的修改

修改可能对 Confluence 的后续版本不兼容，当你对 Confluence 进行升级的时候，你应该总是对你自定义修改的模板文件进行仔细的测试来确定所有的修改对新版本的 Confluence 兼容。

735 0

余二五

犯困，就动手做个修改spfile路径测试可好

807 0

技术小甜

对于NCover 测试的结果显示格式的修改

986 0

余二五

ACT完善与修改测试

1094 0

+关注

天外归云

测试开发工程师，目前就职于网易。

文章

问答

作者高分内容

更多

在Jenkins上做一个定时闹钟 1757 Python3在指定路径下递归定位文件中出现的字符串 1429 Python玩转单链表——逆转单向链表pythonic版 1756 备份Android机上的照片 1056 Python3下requests库发送multipart/form-data类型请求 3670

文章排行榜

最热

最新

1 C生万物 | 操作符汇总大全【庖丁解牛，精细讲解】 95721

2 Spring源码分析之循环依赖及解决方案（一） 93272

3 重识Flutter 非常用Slivers组件速览 - part3 84050

4 无缝切换？从Vue到React 81219

5 fastjson2为什么这么快 74313

6 JVM（Java虚拟机）详解（JVM 内存模型、堆、GC、直接内存、性能调优） 67932

7 Spark+Celeborn：更快，更稳，更弹性 66689

8 Meetup 报名丨共话云原生架构升级，微服务x容器开源 Meetup 北京站来啦！ 64329

9 CVPR2021 | 视觉推理解释框架VRX：用结构化视觉概念作为解释网络推理逻辑的「语言」 63309

10 结构化总结与结构化思考之《金字塔原理》总结 56112

11 实现人机协同高稳定性，阿里云5G专网IoT方案入选工信部优秀解决方案 53923

12 IoT设备的数据格式ProtoBuf转JSON 41036

13 重构的核心-让代码保持整洁 40227

14 【Linux】-- 开发工具yum、vim、gcc、g++、gdb、make、makefile使用介绍（一） 39745

15 IoT设备数据业务价值洞察实践 37810

16 【C++修炼之路】类和对象（中）—— 筑基篇 37093

17 Hive数据倾斜的原因以及常用解决方案 33009

18 高并发编程之阻塞队列 32536

19 Spring 事务【隔离级别与传播机制】 30298

20 性能优化之使用vue-worker插件（基于Web Worker）开启多线程运算提高效率 29320

1 官宣｜Apache Flink 1.17 发布公告 186

2 基于阿里云eRDMA的GPU实例大幅提升多机训练性能 118

3 基于阿里云弹性GPU服务的神龙AI加速引擎，无缝提升AI训练性能 110

4 重构计算，驱动视界：阿里云视觉计算思考与实践 112

5 全新升级｜ECS成熟度评估与洞察，助你精准定位运维风险 64

6 网络平台挑选实名制认证API接口的注意事项 73

7 vika维格表 x 阿里云计算巢：SaaS 云端私有化部署，助力企业数字化转型 252

8 为什么 C# 可能是最好的第一编程语言 136

9 Airwallex 基于 Flink 打造实时风控系统 93

10 IoT小程序在展示中央空调采集数据和实时运行状态上的应用 22811

11 应对网络不可靠挑战，用 OpenYurt 实现边缘业务连续性 8076

12 Meta2032开发功能丨Meta2032系统开发（开发详细）丨Meta2032系统源码部署 58

13 技术一号位的方法论《个人篇》——人成长的本质以及如何构建个人成长路线图 5453

14 企业如何申请短信接口服务 138

15 JVM学习.02 内存分配和回收策略 4759

16 5分钟构建API接口服务 | python小知识 6818

17 流批一体在 AI 核心电商领域的探索与实践 161

18 JAVA实战：如何让单元测试覆盖率达到80%甚至以上 60

19 Linux线程同步与互斥（一） 4957

20 云起实验室《喜迎新春体验福利大放送》中奖名单&问答 77

相关课程

更多

MSE微服务测试最佳实践 - 自动化回归

103

1

去学习

相关电子书

更多

ICA安全标准组测试认证分享

立即下载

MaxCompute基于BigBench标准的最新测试进展

立即下载

用AI高效测试移动应用

立即下载