Question

我正在尝试在将鼠标悬停在表格行上时为表格行添加框阴影，悬停效果在chrome和firefox中工作正常，但在IE 11和edge中不起作用。

我尝试为ie和边缘特定的CSS添加tr display:block，然后框阴影起作用，但是表行将被破坏。

有什么办法可以解决这个问题？

我还附有图片供参考

这是我尝试过的。

HTML

<table border="1px">
    <tr>
        <td></td>
        <td bgcolor="grey">Header1</td>
        <td bgcolor="grey">Header2</td>
        <td bgcolor="grey">Header3</td>
        <td bgcolor="grey">Header4</td>
        <td bgcolor="grey">Header5</td>
    </tr>

    <tr>
        <td bgcolor="grey" class="myCell">Row1</td>
        <td class="myCell">
            cell
        </td>
        <td class="myCell">
            f
        </td>
        <td class="myCell">
            f
        </td>
        <td class="myCell">
            f
        </td>
        <td class="myCell">
            f
        </td>
    </tr>

    <tr>
        <td bgcolor="grey" class="myCell">Row2</td>
        <td class="myCell">
            cell
        </td>
        <td class="myCell">
            f
        </td>
        <td class="myCell">
            f
        </td>
        <td class="myCell">
            f
        </td>
        <td class="myCell">
            f
        </td>
    </tr>


    <tr>
        <td bgcolor="grey" class="myCell">Row3</td>
        <td class="myCell">
            f
        </td>
        <td class="myCell">
            f
        </td>
        <td class="myCell">
            f
        </td>
        <td class="myCell">
            f
        </td>
        <td class="myCell">
            f
        </td>
    </tr>
</table>

css

.highlight {
    box-shadow:0 2px 18px 0 rgba(0,0,0,.5)!important;
    background: none;
}

table{
    border-collapse: collapse !important;
}

table td{
    padding: 10px
}

@media screen\0 {
    .highlight {
        display: inline-block;
    }
}

@supports (-ms-ime-align: auto) {
    .highlight {
        display: inline-block;
    }
}

jQuery

$('.myCell').on('mouseover', function() {
    $(this).closest('tr').addClass('highlight');
    $(this).closest('table').find('.myCell:nth-child(' + ($(this).index() + 1) + ')').addClass('highlight');
});
$('.myCell').on('mouseout', function() {
    $(this).closest('tr').removeClass('highlight');
    $(this).closest('table').find('.myCell:nth-child(' + ($(this).index() + 1) + ')').removeClass('highlight');
});

Answer 1

检查this帖子，因为它可以帮助遇到与您相同的问题的人。

您可以详细了解here

表行的框阴影在IE和Edge中不起作用

1 个答案: