你能在IE中的表行上加一个渐变吗



当我将鼠标悬停在表的某个部分的表行上时,我希望背景变为线性渐变。CSS很简单:

tbody.row-links tr:hover {
    background: ...typical multi-browser linear gradient code...
    color: #333C3E;
    cursor: pointer;
}

适用于FF、Chrome和Safari,但不适用于任何版本的IE。我知道CSS正在解析,因为颜色和光标会发生变化。我尝试将filter放在普通的<tr>标记本身上,但仍然没有。IE只是忽略表行上的filter吗?

我能想到的最好的办法是,当该行悬停时,将梯度应用于该行的<td> s,但这会导致在该行周围拖动鼠标时出现可爱的闪烁。

现在我只给IE一个悬停时的纯色背景。有没有其他人试过并弄明白了?

您可以使用以下内容

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

用于IE9

background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);

用于IE10

只有图像的旧IE。

最新更新