I have got a problem using the hover element in my css file. It is working in IE11, but not in Chrome. This is the code that i am using for hover:
.datagrid table thead th:hover {background-color:#baeafd;}
The whole css file:
.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:
<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/
I don't think it should have been working on IE11. I changed background-color
to 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.
You have used background
properties to th
element.. so You'll have to change the specific properties for the hover effect to be visible..
Try this 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');
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.