最近在给table里面的tr标签添加高亮背景色显示的时候,遇到一个坑,HTML结构如下:

<tr>

  <td></td>

  <td></td>

  <td></td>

  <td></td>

</tr>

想要给tr标签添加一个鼠标滑过背景样式,但是td的样式会覆盖掉tr的样式,

需要特别处理一下:

tr:hover{

  background-color: #ccc;

}

tr:hover td{

  background: none;

}

问题解决。

关于tr:hover变色的问题的更多相关文章

  1. tr:hover变色的问题

    做表格隔行变色(高亮显示),可以通过设置css中的 tr:hover伪类属性达到效果, 但是,会出一点小问题.td的背景色会覆盖tr的背景色, 在tr:hover下边加上一句:tr:hover td{ ...

  2. 一个简单的tr:hover效果

    昨天,搞项目的时候,在一个小问题上卡了40分钟,现在想想,还是平时比较少去注意一些细节,经过这次,一定要去多注意细节了. 好了废话不多说,我现在说明下遇到的问题,一个表格中,要求是当鼠标滑过每一行时, ...

  3. GridView固定行宽,自动换行,鼠标放在Table的Tr上变色

    //固定行宽table-layout:fixed;//自动换行word-break :break-all;word-wrap:break-wordGridView.Attributes.Add(&qu ...

  4. css - a:hover变色问题

    今天在帮我们学校做网站的时候,由于在css这里不是很擅长,过程中发现一个问题,a:hover的时候,字体的颜色不变.后来才发现将a和div的嵌套的问题, 我的css代码为: .left_box .lb ...

  5. jQuery table tr隔行变色,鼠标移入移出变色,鼠标点击变色

    .trover { background: #f9f9f9; } .trclick { background: #c4e8f5; } .treven{ background:#CCFFCC; } .t ...

  6. Js 实现 多个tr 点击变色,再点击还原

    我用的是渲染页面,将自定义的值作为一个表示符判断当前状态 <!DOCTYPE html> <html> <head> <meta charset=" ...

  7. Jquery的hover方法让鼠标经过li时背景变色

    来源地址:http://itfish.net/article/29790.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

  8. tr td 移动变色

    jsp <table  id="tableList" class="table table-hover"></table> css .t ...

  9. Table tr 的隔行变色

    <style type="text/css">    table{border-collapse:collapse;border:1px solid #999;} td ...

随机推荐

  1. Elasticsearch 因拷贝多余的jar到lib库导致无法启动的问题

    因为需要测试,无意中拷贝了一个netty-buffer-4.1.16.Final.jar包放到es的lib目录下,晚上回家启动es的时候发现启动不起来了.检查日志发现如下错误. 其中有一句关键语句 C ...

  2. v-model和v-bind的区别

    VUE学习篇1 Mustache (双大括号写法)不能在 HTML 属性中使用,应使用 v-bind 指令: <div v-bind:id="dynamicId">&l ...

  3. (转载)一位资深程序员大牛给予Java初学者的学习建议

    这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的,能不能给点建议? 今天我是打算来点干货,因此咱们就不说一些学习方法和技巧了,直接来谈每个阶段要 ...

  4. nginx(三)-动静分离

    什么叫动静分离 所谓动静分离就是说我们的图片,css,js之类的文件都交给nginx来处理,nginx处理不了的,比如jsp就交给tomcat来处理. 有人计算过,nginx代理处理静态请求远远优于t ...

  5. git常用安装包,指令

    babel-polufill  -es6  API转义 npm install --save @babel/polyfill babel-runtime -es语法转义 npm install --s ...

  6. inline-block BUG问题

    使用inline-block会使父元素高度不正常,要慎用!!!可以给父元素添加font-size:0解决,或者使用用float或者flex布局.

  7. oracle12c之一 控制-PDB的磁盘I/O(IOPS,MBPS)资源管理

    在以前的版本中,没有简单的方法来控制单个PDB使用的磁盘I / O量. 因此,某个PDB可能耗尽大量磁盘I / O,并影响同一实例中的其他PDB的性能. Oracle 12c R2可以控制PDB使用的 ...

  8. 搭建github静态博客

    github设置 建立新的repository,命名为OwnerName.github.io,例如gotochenglong.github.io git管理 设置ssh密匙 使用命令ssh-keyge ...

  9. ASP.NET实现数据绑定

    一.数据绑定语法 数据绑定表达式包含在“<%#”和“%>”分隔符之内,并使用Eval方法和Bind方法.Eval方法用于定义单向(只读)绑定,Bind方法用于定义双向(可更新)绑定. 语法 ...

  10. 《JavaScript编程精解》读书笔记

    第一章 JavaScript基础:值.变量.控制流程 JavaScript里有六种基本类型:number类型.string类型.boolean类型.object.function和undefined. ...