为什么悬停在 IE11 中有效，但在 Chrome 中无效？答案

【问题标题】：Why is hover working in IE11, but not in Chrome?为什么悬停在 IE11 中有效，但在 Chrome 中无效？
【发布时间】：2016-04-11 12:53:44
【问题描述】：

我在使用我的 css 文件中的悬停元素时遇到了问题。它适用于 IE11，但不适用于 Chrome。这是我用于悬停的代码：

.datagrid table thead th:hover {background-color:#baeafd;}

整个css文件：

.datagrid table { border-collapse: collapse; text-align: left; width: 100%; } 
.datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #8C8C8C; }
.datagrid table td, 
.datagrid table th { padding: 5px 10px; }
.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #EDEDED), color-stop(1, #8F8F8F) );background:-moz-linear-gradient( center top, #EDEDED 5%, #8F8F8F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#EDEDED', endColorstr='#8F8F8F');background-color:#EDEDED; color:#000000; font-size: 11px; font-weight: bold; border-left: 1px solid #919191; }
.datagrid table thead th:first-child { border: none; }
.datagrid table thead th:hover {background-color:#baeafd;}
.datagrid table tbody td { color: #000000; border-left: 1px solid #DBDBDB;font-size: 12px;border-bottom: 1px solid #DBDBDB;font-weight: normal; }
.datagrid table tbody .alt td { background: #fff; color: #000000; }
.datagrid table tbody td:first-child { border-left: none; }
.datagrid table tbody tr:last-child td { border-bottom: none; }

我的html代码：

<div class="datagrid"><table class="sortable">
<thead><tr><th>Numbers</th><th>header</th><th>header</th><th>header</th></tr></thead>
<tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr class="alt"><td>5</td><td>data</td><td>data</td><td>data</td></tr>
<tr><td>3</td><td>10</td><td>data</td><td>data</td></tr>
<tr class="alt"><td>9</td><td>data</td><td>data</td><td>data</td></tr>
<tr><td>7</td><td>data</td><td>data</td><td>data</td></tr>
</tbody>
</table></div>

【问题讨论】：

它也不能在 Firefox 上运行。

标签： html css google-chrome html-table internet-explorer-11

【解决方案1】：

将背景颜色更改为背景

.datagrid table thead th:hover {background:#baeafd;}

【讨论】：

【解决方案2】：

试试这个：

https://jsfiddle.net/prq4zvjf/1/

我认为它不应该在 IE11 上运行。我把background-color改成了background

.datagrid table thead th:hover {background:#baeafd;}

您在原始 th 元素上声明了 background，但您试图用悬停效果替换 background-color。

【讨论】：

【解决方案3】：

您已将background 属性用于th 元素..因此您必须更改特定属性才能使悬停效果可见..

试试这个 css..

.datagrid table thead th:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8F8F8F), color-stop(1, #EDEDED) );
    background:-moz-linear-gradient( center top, #8F8F8F 5%, #EDEDED 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8F8F8F', endColorstr='#EDEDED');
}

【讨论】：