title: jQuery / CSS: Changing border color not working properly with border-collapse
body: <p>I am new to CSS and jQuery and hope someone can help me with this. </p>
  
  <p>I have a large HTML table that is created dynamically. 
  Within this table I just <strong>want to highlight the borders of a td when hovering over it</strong>. </p>
  
  <p>First I tried to use <code>:hover</code> in CSS for this but I couldn't find a way to realise this in CSS at all. It seems it doesn't work in this case ?</p>
  
  <p>I then tried to use JS in the document ready function which does apply border colors but only to two of the four border sides which I guess is caused by CSS' <code>border-collapse:collapse;</code>. 
  It works without the border-collapse but I do need this as double borders or <code>border-spacing: 0;</code> take too much space in this large table and make the tds appear smaller. </p>
  
  <p><strong>Note:</strong> This only refers to tds that contain a div as this way I would like to show which of them are editable.</p>
  
  <p>Can someone tell me how I can work around this or what other options there are ?</p>
  
  <p><strong>My JS:</strong> </p>
  
  <pre><code>$(document).on({
      mouseenter: function(){
          $(this).parent().css('border-color', 'blue');
      },
      mouseleave: function(){
          $(this).parent().css('border-color', '');
      }
  }, 'div.editable');
  </code></pre>
  
  <p><strong>My CSS (relevant part only):</strong></p>
  
  <pre><code>#tblCalendar, #tblCalendar th, #tblCalendar td {
      border: 1px solid #ccc;
      border-collapse: collapse;
      margin: 0;
  }
  </code></pre>
  
  <p><strong>My HTML (example td):</strong></p>
  
  <pre><code>...&lt;td&gt;&lt;div contenteditable="true" class="editable"&gt;&lt;/div&gt;&lt;/td&gt;...
  </code></pre>
  
  <p>Many thanks in advance, 
  Mike</p>