在实际项目中BootStrap的默认样式可能并不能完全满足我们的需求,在开发过程中本着软件可维护性的需要,我们尽量不对其css文件进行修改,而是自定义添加公共css样式文件。

BootStrap的表格悬停table-hover样式颜色为浅灰色,与斑马线table-striped颜色一致,若须同时添加此两种效果,则用户体验会遭到破坏,解决办法就是修改鼠标悬停颜色。

通过浏览器开发人员工具【F12】查看资源,找到bootstrap.css样式文件,查找table-hover

其中background-color:#f5f5f5就是悬停颜色的颜色代码,我们将选中的这段代码复制到需要修改的页面。

将background-color:#f5f5f5改为自己需要的颜色代码即可。若要将其作为公共样式,则需要对其优先权限进行设置,添加!important即可。

.table-hover>tbody>tr:hover {background-color: wheat!important;
}

CSS样式表的权限和级别详情可参考http://my.oschina.net/papio/blog/744732

转载于:https://my.oschina.net/papio/blog/744727

BootStrap表格鼠标悬停颜色修改相关推荐

  1. Bootstrap3 表格-鼠标悬停

    通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应. <table class="table table-hover" ...

  2. FarPoint.Win.Spread 表格 鼠标悬停 展示表格数据 并且控制每行字数 代码备忘

          注册事件,并进行配置 //鼠标悬停 显示相关             this.spdMain.TextTipFetch += new FarPoint.Win.Spread.TextTi ...

  3. 鼠标点击出现下拉菜单html,Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...

  4. Bootstrap——表格(基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格)

    在网页制作中,通常会用到表格的鼠标悬停.隔行变色等功能.Bootstrap中提供了一系列表格布局样式,利用该样式可以帮助开发者快速开发出美观的表格,作用于<table>元素的表格样式如下表 ...

  5. 关于element-ui 中 table 鼠标悬停时高亮背景颜色的修改,添加fixed后颜色又出现问题

    table 鼠标悬停时高亮背景颜色的修改 .el-table tbody tr:hover>td { background-color: #颜色 } 或 .el-table__body-wrap ...

  6. vue实现echarts树图修改节点图片,修改连线颜色,鼠标悬停显示详情,鼠标右键弹出菜单,搜索,导出PNG,高亮,查看节点是否还有子节点,修改树图的展示方式

    其实这些效果之前都有用js写过,但是最近在写vue项目,里面的些许语法还是有些不一样的,所以还是写一遍文章总结一下,下次遇到就可以直接用了. 如果想看js写法,可以看我别的文章 首先,实现效果入下图: ...

  7. PHP鼠标滑过变色命令,WordPress鼠标悬停变色的修改方法

    原创内容,转载请注明出处:https://www.myzhenai.com.cn/post/3253.html 关键词:wordpress 鼠标 悬停 变色 我总是觉得我两个WordPress博客的主 ...

  8. Bootstrap鼠标悬停下拉导航总结

    文章目录 Bootstrap鼠标悬停下拉导航总结 方案一 · 源码修改 添加css代码 方案二 · 不改动源码 附件:压缩版本 de 源码修改 Bootstrap鼠标悬停下拉导航总结 以bootstr ...

  9. Bootstrap导航条鼠标悬停下拉菜单

    Bootstrap导航条鼠标悬停下拉菜单 Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹 ...

  10. Vue中鼠标悬停更换图片/文字内容,动态展示/修改某些属性

    Vue中鼠标悬停更换图片/文字内容,动态展示/修改某些属性 鼠标悬停时:@mouseenter 鼠标离开时:@mouseleave 利用以上来绑定相应方法,例如: <div @mouseleav ...

最新文章

  1. RGBD相机模型与图片处理
  2. 保护物联网的数据隐私和在线安全的7种方式
  3. C/C++基础问题归集
  4. 使用Nomad构建弹性基础架构: 容错和中断恢复
  5. BZOJ 1968 [Ahoi2005]COMMON 约数研究
  6. 【虚拟化】docker构建私有仓库,上传镜像至私有仓库
  7. 如何在Java JVM中处理图像和视频
  8. 安卓逆向_1 --- 逆向环境配置、APK 文件结构、APK 打包流程
  9. Eclipse快捷键-方便查找
  10. 可能是阿里云学生成长计划续费资格考试最全的答案资料
  11. 极简主义︱利用apple机器学习平台Turicreate实现图像相似性检索(二)
  12. SQLServer 延迟事务持久性
  13. linux通信加密软件,5个Linux加密工具:VeraCrypt,CipherShed,CryFS,GnuPG,Encfs介绍
  14. 设计的萌芽阶段_第一章 设计的萌芽阶段 第一节 设计概念的产生
  15. 程序员生涯困惑时的自我解脱
  16. 后端存储课程笔记(大量实战经验)
  17. Aspose.Words 22.12.0 for NET cRACK
  18. android输入法切换
  19. 02.python求和
  20. 上网的时候不知道自己电脑的IP地址怎么办? 找藏拙IP搜索

热门文章

  1. java 证书错误_java – SSL证书错误:certificate_unknown
  2. 证书错误 SSLCertVerificationError
  3. CORTEX-A系列处理器
  4. Android 强制关闭软键盘/修改软键盘状态——弹出或关闭
  5. Oracle SQL基础
  6. -- 99美金和299美金的开发者证书的区别 --
  7. Android 的 getIntExtra(name, defaultValue)里 defaultValue是什么意思
  8. 机械设备维修报修小程序开发制作功能介绍
  9. 蜀门注册php,蜀门私服常用修改配置大全
  10. MHL技术剖析,比HDMI更强【转】