jQuery / CSS：更改边框颜色无法与边框折叠一起正常工作

Question

我是 CSS 和 jQuery 的新手，希望有人能帮助我。

我有一个动态创建的大型 HTML 表格。 在这个表格中，我只是想在鼠标悬停时突出显示 td 的边框。

首先，我尝试在 CSS 中为此使用 :hover，但我根本找不到在 CSS 中实现这一点的方法。在这种情况下似乎不起作用？

然后我尝试在文档就绪函数中使用 JS，该函数确实应用了边框颜色，但只应用于四个边框边中的两个，我猜这是由 CSS'border-collapse:collapse; 引起的。 它可以在没有边框折叠的情况下工作，但我确实需要它作为双边框或border-spacing: 0; 在这个大表中占用太多空间并使 tds 看起来更小。

注意：这仅指包含 div 的 td，因为这样我想显示其中哪些是可编辑的。

谁能告诉我如何解决这个问题或有哪些其他选择？

我的 JS：

$(document).on({
    mouseenter: function(){
        $(this).parent().css('border-color', 'blue');
    },
    mouseleave: function(){
        $(this).parent().css('border-color', '');
    }
}, 'div.editable');

我的 CSS（仅相关部分）：

#tblCalendar, #tblCalendar th, #tblCalendar td {
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
}

我的 HTML（示例 td）：

...<td><div contenteditable="true" class="editable"></div></td>...

提前非常感谢， 迈克

Answer 1

border-collapse 使使用 border 很难做到这一点，但您可以使用 outline 代替，如下所示：

$(document).on({
  mouseenter: function() {
    $(this).parent().css('outline', '1px solid blue');
  },
  mouseleave: function(){
    $(this).parent().css('outline', '');
  }
}, 'div.editable');

#tblCalendar, #tblCalendar th, #tblCalendar td {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblCalendar">
  <tr>
    <td><div contenteditable="true" class="editable">This is editable</div></td>
    <td><div contenteditable="true" class="editable">This is editable</div></td>
    <td>Not editable</td>
  </tr>
  <tr>
    <td>Not editable</td>
    <td><div contenteditable="true" class="editable">This is editable</div></td>
    <td><div contenteditable="true" class="editable">This is editable</div></td>
  </tr>
</table>

Answer 2

要扩展@RickHitchcock 的答案，您也可以使用css ::before 伪元素来做到这一点。但是您必须设置z-index: -1px，这样您就可以编辑contenteditable 区域。

#tblCalendar th:hover::before, 
#tblCalendar td:hover::before {
  content: "";
  position: absolute;
  top: 0px; left: 0px; right: 0px; bottom: 0px;
  border: 1px solid blue;
  z-index: -1;
}

#tblCalendar, #tblCalendar th, #tblCalendar td {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  position: relative;
}
#tblCalendar th:hover::before, 
#tblCalendar td:hover::before {
  content: "";
  position: absolute;
  top: 0px; left: 0px; right: 0px; bottom: 0px;
  border: 1px solid blue;
  z-index: -1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblCalendar">
  <tr>
    <td><div contenteditable="true" class="editable">This is a test</div></td>
    <td><div contenteditable="true" class="editable">This is a test</div></td>
    <td><div contenteditable="true" class="editable">This is a test</div></td>
  </tr>
  <tr>
    <td><div contenteditable="true" class="editable">This is a test</div></td>
    <td><div contenteditable="true" class="editable">This is a test</div></td>
    <td><div contenteditable="true" class="editable">This is a test</div></td>
  </tr>
</table>