[英]Why is hover working in IE11, but not in Chrome?
I have got a problem using the hover element in my css file. 我在css文件中使用hover元素时遇到问题。 It is working in IE11, but not in Chrome. 它可以在IE11中使用,但不能在Chrome中使用。 This is the code that i am using for hover: 这是我用于悬停的代码:
.datagrid table thead th:hover {background-color:#baeafd;}
The whole css file: 整个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; }
My html code: 我的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>
将背景色更改为背景
.datagrid table thead th:hover {background:#baeafd;}
Try this: 尝试这个:
https://jsfiddle.net/prq4zvjf/1/ https://jsfiddle.net/prq4zvjf/1/
I don't think it should have been working on IE11. 我认为它不应该在IE11上工作。 I changed background-color
to background
我将background-color
更改为background
.datagrid table thead th:hover {background:#baeafd;}
You had background
declared on the original th
element but you were trying to substitute background-color
on the hover effect. 您在原始的th
元素上声明了background
,但是您试图在悬停效果上替换background-color
。
You have used background
properties to th
element.. so You'll have to change the specific properties for the hover effect to be visible.. 您已经使用background
属性th
元素..所以你必须改变悬停效果的特定属性可见..
Try this css.. 试试这个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');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.