jQuery / CSS:使用border-collapse改变边框颜色不能正常工作

Question

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

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

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

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

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

有人能告诉我如何解决这个问题或者有什么其他选择吗?

My 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>