Trouble with on click on mac

As long as hover is active, in any browser in OS X you need to move the mouse after a click for the on-click class to change.

by Marta Kule

HTML

<!DOCTYPE html>
<body>

<table>
<tr class="heading">
  <th class="buttons">
		<button id="yes">Yes</button>
		<button id="no">No</button>
		<button id="clear">Clear</button>
	</th>
  <th><p>Lorem</p></th>
  <th><p>ipsum</p></th>
  <th><p>quia</p></th>
  <th><p>dolor</p></th>
  <th><p>sit</p></th>
</tr>

<tr id="one">
  <td class="main">Lorem</td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>

<tr id="two">
  <td class="main">ipsum</td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>

<tr id="three">
  <td class="main">quia</td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>

<tr id="four">
  <td class="main">dolor</td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>

</table>
</body>

CSS

* {
  font-family: Geneva, Tahoma, sans-serif;
}

body {
  background-color: #f0f7fd;
}

/*Troublemaker in OS X*/
td:not(.main):hover {
    background: #cccccc;
    background: linear-gradient(to bottom right, #cccccc, #a6a6a6);
}

button {
  width:40%;
  text-align: center;
  font-weight: bold;
  padding:3px;
  margin:1px;
  border: none;
  box-shadow: 2px 2px 2px grey;
  margin-bottom:4px;
  border-radius:3px;
}

#yes, td.yes {
  background: green;
  background: linear-gradient(to top right, green, yellowgreen);
}

#no, td.no {
  background: red;
  background: linear-gradient(to bottom right, red, maroon);
}

td.yes, td.no {
  pointer-events: none;
}

#yes, #no {
    color: white;
}

#clear {
  width: 60%;
  color:#404040;
}

table {
    margin-bottom: 30px;
    border-spacing: 5px;
    text-align: center;
    vertical-align: middle;
}

td {
  position: relative;
  background: #c2ccd4;
  background: linear-gradient(to top right, #c2ccd4, #d2dde6);
}

td:not(.main):after{
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: 50%;
  background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}



th, .main {
  padding:2px;
  background: none;
  height: 4em;
  width: 16.66%;
  font-weight: bold;
  font-size:.8em;
  color:#404040;
  box-shadow: none;
}

th {
  border-left: 1px grey solid;
}

.buttons {
  border:none;
}

th:nth-child(2), .buttons, #one > td.main:first-child {
  border:none;
}

.main {
  border-top: 1px grey solid;
}


p {
  margin:0;
}

/*@media (pointer: fine) {
  td:not(.main):hover {
    background: #cccccc;
    background: linear-gradient(to bottom right, #cccccc, #a6a6a6);
  }
}*/

JavaScript

$(document).ready(function() {
  var thisClass = "yes";
  $('button:not("#clear")').on('click',function(){
    console.log(thisClass = $(this).attr('id'));
  });

  $('#clear').on('click', function(){
      console.log($('tr:not(".heading") td:not(".main")').removeClass("yes").removeClass("no"));
    });

  $('tr:not(".heading") td:not(".main")').on('click', function() {
    $(this).parent().children('td').removeClass(thisClass);
    $(this).addClass(thisClass);

  });
});