Question

我试图突出显示悬停时的表格单元格。使用jQuery或CSS足够容易，但是我在单元格中有许多小div，当它们悬停时，我只希望div突出显示而不是整个单元格；

因此图像显示了一个10格的表格单元格；当将一个小矩形div悬停时，它们需要突出显示，但是当除div之外的单元格的任何部分都悬停时，其自身就会突出显示。

Answer 1

这是使用jQuery的一种方法：

$(function() {
    var td = $("td");

    // add/remove .hovering for table cells as normal
    td.hover(function() {
        $(this).addClass("hovering");
    }, function() {
        $(this).removeClass("hovering");
    })

    // add/remove .hovering for <div> and do opposite for parent <td>
    $("div").hover(function() {
        $(this).addClass("hovering");
        td.removeClass("hovering");
    }, function() {
        $(this).removeClass("hovering").parents("td").addClass("hovering");
    })
})

div {
  background-color: #fff;
  border: 1px solid grey;
  display: inline-block;
  min-width: 50px;
  min-height: 20px;
  margin: 3px;
}
div.hovering {
  background-color: lightskyblue;
}
table {
  text-align: center;
  width: 650px;
}
td {
  border: 1px solid black;
  font-size: 0;
  padding: 5px;
}
td.hovering {
  background-color: #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <td>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </td>
        </tr>
    </tbody>
</table>

如何突出显示悬停时的单元格

1 个答案: