Question

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

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

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

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

注意：这仅指包含div的tds，因为我希望显示哪些是可编辑的。

有人可以告诉我如何解决这个问题或其他选择吗？

我的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代替：{/ p>

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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：使用border-collapse更改边框颜色不正常

2 个答案: