首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当光标位于两个单元格之间时,表格上的CSS悬停效果不会应用tbody和tr悬停效果

。这是因为CSS中的悬停效果(:hover)是基于元素的,而不是基于元素之间的空白区域。当光标位于两个单元格之间时,实际上光标并不处于任何元素上,因此悬停效果不会触发。

要解决这个问题,可以使用JavaScript来实现自定义的悬停效果。以下是一个示例代码:

HTML代码:

代码语言:txt
复制
<table id="myTable">
  <tbody>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
    </tr>
    <tr>
      <td>单元格3</td>
      <td>单元格4</td>
    </tr>
  </tbody>
</table>

CSS代码:

代码语言:txt
复制
.hover {
  background-color: yellow;
}

JavaScript代码:

代码语言:txt
复制
var table = document.getElementById("myTable");
var cells = table.getElementsByTagName("td");

for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener("mouseover", function() {
    this.parentNode.classList.add("hover");
  });

  cells[i].addEventListener("mouseout", function() {
    this.parentNode.classList.remove("hover");
  });
}

以上代码将给表格中的每个单元格添加了鼠标悬停事件监听器。当鼠标移到单元格上时,通过添加CSS类名"hover"来应用自定义的悬停效果;当鼠标移出单元格时,通过移除CSS类名"hover"来取消悬停效果。

这样,无论光标位于两个单元格之间还是在单元格内部,都可以应用自定义的悬停效果。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券