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

Question

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

我有一个很大的 HTML table 是动态创建的。在这个 table 中，我只是 想在将鼠标悬停在 td 上时突出显示它的边界 。

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

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

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

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

我的 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>

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

jQuery / CSS: Changing border color not working properly with border-collapse

css

jquery

mouseover

hover