McDiabeetus McDiabeetus - 2 months ago 13
CSS Question

Turn off hover event after click and keep click

This is my js code. I am trying to make a TicTacToe game. When a player hovers over a table cell, they will see either an "x" or an "o" marker in that cell with 50% opacity. When they click on the table cell, they will see a marker in that cell with 100% opacity. When I hover on a cell that has been clicked, it continues to apply the hover event. How can I turn the hover event off after I have clicked, while maintaining the cell's new opacity? The goal of my function is to be able to hover over a table cell and temporarily see a 50% opaque marker and to be able to click on a table cell and permanently see a 100% opaque marker. Pictures http://imgur.com/a/WaZBQ

Note: I tried including a .off function at the end of my click event.

$(this).off("mouseenter mouseleave);


This does not solve my issue.

$(".tableCell").hover(function(){
$(this).children(".tableCellMarker").attr("src", function(index, attr){
return attr.replace("", "images/X.png");
});
}, function(){
$(this).children(".tableCellMarker").attr("src", function(index, attr){
return attr.replace("images/X.png", "");
});
});
$(".tableCell").click(function(){
$(this).children(".tableCellMarker").attr("src", function(index, attr){
return attr.replace("","images/X.png");
});
$(this).children(".tableCellMarker").css("opacity",1);
$(this).addClass("marked");
});


Here is the css for .tableCellMarker

.marker {
cursor:pointer;
margin:-80px 0px 150px 50px;
opacity:0.5;
position:absolute;
}

Answer

It would be so much easier if you used classes and use CSS Specificity to deal with the states.

$("table tbody").on("click", "td", function() {
   $(this).toggleClass("selected");
});
table {
  border-collapse: collapse; 
  width: 200px;
  height: 200px;
}

td {
    border: 1px solid black;
    text-align: center;
    background-color: white;  
}

td:hover {
    background-color: yellow;  
}

td.selected, td.selected:hover {
    background-color: green;  
}
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

Now how can we apply it to tic tac toe? Add more css classes and a little bit of logic.

var turn = true;  //determines x (true) and o (false)
$(".game tbody").on("click", "td", function() {  //bind click to cell
   var cell = $(this);  //get cell that was clicked
   if (cell.hasClass("selected")) return;  //if cell was selected than ignore click
   $(this)
     .addClass("selected")  //mark cell as selected
     .addClass(turn?"x":"o");  //set the class based on turn
   turn = !turn; //toggle player
  $(".game").toggleClass("x o");  //toggle whose turn it is (so hover is different)
});
table {
  border-collapse: collapse; 
  width: 200px;
  height: 200px;
}

td {
    border: 1px solid black;
    text-align: center;
    background-color: white;  
}

.x td:hover {
    background-color: #ABEBC6;  
}
.o td:hover {
    background-color: #F5B7B1;    
}


td.x, td.x:hover {
    background-color: #239B56;  
}

td.o, td.o:hover {
    background-color: #B03A2E;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="game x">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

Comments