先说问题:

  这是大致的HTML结构

<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Phone number</th>
<th>Date</th>
<th>Name</th>
<th>Label</th>
</tr>
</thead>
<tbody>
<tr>
<td>0342443</td>
<td>10 August 2013</td>
<td>Kate</td>
<td>Loves cats</td>
</td>
<tr>
<td>0342442</td>
<td>9 August 2013</td>
<td>Mary</td>
<td>Boring</td>
</tr>
<tr>
<td>0342441</td>
<td>8 August 2013</td>
<td>Anna</td>
<td>Loves extreme stuff</td>
</tr>
</tbody>
</table>

我想要在tr上添加一个效果,当鼠标滑过的时候应用box-shadow样式,让元素有被选中的表现方式。

所以我在css里面这样写

tr:hover {
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.15);
}

在chrome,firefox,360这些浏览器里面效果正常。但是在ie10上面没有作用。

起初我认为是ie对hover的支持程度导致,所以去查阅相关问题和资料

并尝试:

    使用js绑定mouseover事件,如果是ie浏览器的话就添加上box-shadow这个样式。结果当时是没用。于是我用li和div使用css的hover,在ie浏览器里面生效,

所以我就排除了hover的问题。

于是将问题定位于tr标签是否能应用box-shadow样式。所以我就找到了  这篇文章

总结:

  box-shadow属性生效于标签类型为display:block或者display:inline-block; 这就是为啥li和div生效。大家都知道tr的默认类型为 display: table-row

所以解决办法就是将tr的类型设置为block,但是这样问题又来了。改变类型之后,原本table tr带来的自适应宽高这些属性都失效了,所以还需要给td th一个最小宽度的

属性:min-width:100px;

如下样式:

td, th {min-width: 100px; }
tr { display: block; }
tr:hover { box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.15); }

很好,暂时解决了在ie浏览器下面的样式问题。

转载于:https://www.cnblogs.com/jjucap/p/8288998.html

tr标签使用hover的box-shadow效果不生效的更多相关文章

  1. SP2010 3D标签云Web部分--很酷的效果,强烈推荐!!

    SP2010 3D标签云Web部分--很酷的效果.强烈推荐! ! 项目描述叙事         基于简单Flash的3D标签云Web部件.SP Server 2010使用. 建立在内置标签云Web部件 ...

  2. 用a标签实现submit提交按钮的效果

    今天做了一个小项目练手,要求点击a标签后实现post提交的效果,看到这个的时候心理还是有一丝丝懵逼的,不过在朕的十秒钟思考之后有了头绪... 首先表单 <form action="te ...

  3. Html中 <tr> 标签的隐藏与显示

    TR标签的隐藏与显示:block(显示)和none(隐藏) <tr  style="display:none"> <tr id="sample" ...

  4. tr标签是什么

    <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素.

  5. CSS3实现图片黑白滤镜居中,hover缩放遮罩的效果

       hover: 在前端开发中经常会遇到项目展示,往往会采用卡片方式来描述.众多网站中,普遍采用CSS3的scale()方法来实现交互. 本文即是利用纯CSS实现图片居中缩放,此类方法各大网站均有应 ...

  6. 解决:Map的area属性标签鼠标Hover可以给area加背景

    css的area标签是不支持hover的,只有a标签才支持.li标签在IE浏览器下才支持,所以采用jquery的mouseenter和mouseleave事件完成.首先讲jQuery对应的事件:1.m ...

  7. JS从后台获取数据,前台动态添加tr标签中的td标签

    功能描述: 要求从后台查询该省份的所有城市,然后动态的再前台固定的tr标签中添加相应的td标签来展示城市基本信息: 文章目录 #一.前台jsp及js源码 jsp:在固定的tr标签中添加一个id,通过j ...

  8. swiper添加了自动滚动效果,然后用手指划过页面,发现自动滚动效果不生效了

    我给swiper添加了自动滚动效果,然后用手指划过页面,发现自动滚动效果不生效了,哪里出了问题呢? 添加参数 autoplayDisableOnInteraction : false,

  9. [问题解决]Fresco设置圆角效果不生效问题探究

    [问题解决]Fresco设置圆角效果不生效问题探究 /** * Created by diql on 2017/2/21 11:07:04. */ 问题 在View中设置: fresco:rounde ...

随机推荐

  1. IP和端口查询

  2. 来,让我们一起来学习VIM

    什么是VIM vim是一个高度可定制的文本编辑器,被很多专业的程序员使用,并获得了程序员的一致好评. 下图是Vim的官网vim.org 你可以在Vim的官网免费下载并使用Vim,同样可以在Vim官网学 ...

  3. C语言中 sinx cosx 的用法

    #include<stdio.h> #include<math.h> int main() {     double pi=acos(-1.0);     double ang ...

  4. Array(数组)对象-->join() 方法

    1.定义和用法 join() 方法把数组中的所有元素用指定的参数作为分隔符拼接成一个字符串. 语法: array.join(separator) 举例: var arr = [1,2,3,4,5]; ...

  5. HAproxy 基础配置

    基础配置详解 HAProxy 的配置文件haproxy.cfg由两大部分组成,分别是global和proxies部分 global:全局配置段 进程及安全配置相关的参数性能调整相关参数Debug参数 ...

  6. Java程序员必备:序列化全方位解析

    前言 相信大家日常开发中,经常看到Java对象"implements Serializable".那么,它到底有什么用呢?本文从以下几个角度来解析序列这一块知识点~ 什么是Java ...

  7. O - Navigation System CodeForces - 1321D

    题目大意:有一个导航系统,会根据你当前的位置,规划到目的地的最短路线,给你一个有向图,和一条行驶路径,问你导航重新规划路径的最大次数和最小次数. 读题的时候题意特别不理解,何为最大次数,何为最小次数? ...

  8. C - 剪花布条 (KMP例题)

    一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢?  Input输入中含有一些数据,分别是成对出现的花布条和 ...

  9. 在数组添加元素时报错:IndexError: list index out of range

    今天第一次发随笔还有许多不足之处,欢迎评论!!! 最近在写一个成语接龙的小游戏,结果在数组添加元素时报错:IndexError: list index out of range 源码: import ...

  10. CAS原理解析

    CAS底层原理 概念 CAS的全称是Compare-And-Swap,它是CPU并发原语 它的功能是判断内存某个位置的值是否为预期值,如果是则更改为新的值,这个过程是原子的 CAS并发原语体现在Jav ...