title: .hover() seems to overwrite .click()
body: <p>A little background of my problem:</p>
  
  <p>I'm making a board-based game when the user is going to be able to make a path from a square to another one, the thing is that when a square is clicked it should stay highlighted no matter if pointer is over of it and then leaves it. It seems when the square is clicked and then the pointer leaves it the handlerIn of .hover() changes the state of the square's path-type attribute making possible to the square to be unhighlited when the pointer enter and leaves the square. </p>
  
  <p>this is what I've got so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
   $('td.soccer-field').click(function(){
     if ($('#dice1').text() != '' &amp;&amp; $('#dice2').text() != '') {
      if ($("[path-type='begin-path']").length == 0) {
       $(this).attr('path-type','begin-path');
      } else if ($("[path-type='begin-path']").length &amp;&amp; $(this).attr('path-type') != 'end-path'){
       $(this).attr('path-type','end-path');
       $('[path-type="selecting-actual-path"]').attr('path-type','actual-path');
      } else if ($(this).attr('path-type') == 'end-path'){
       $(this).attr('path-type','');
      }; 
     }
    });
  
  
   $('td.soccer-field').hover(
    function () {
     if ($('#dice1').text() != '' &amp;&amp; $('#dice2').text() != '') {
      if ($("[path-type='begin-path']").length == 0) {
       $(this).attr('path-type','select-begin-path');
      } else if ($(this).attr('path-type') == ''){
       var actualCell = $(this).attr('id') + $(this).parent().attr('id');
       var cell, distance,dicesResult =  parseInt($('#dice1').text())+ parseInt($('#dice2').text());
       $("[path-type*='path']").each(function  () {
        cell = $(this).attr('id') + $(this).parent().attr('id');
        distance = new Board().calculateDistanceSquares(actualCell,cell);
        if (distance == 1  &amp;&amp; $("[path-type='selecting-actual-path']").length &lt; (dicesResult -2))
        {
          $(this).attr('path-type','selecting-actual-path');
          return false;
        }
       });
      } 
     };
    },function () {
     if ($(this).attr('path-type') == 'selecting-actual-path' || $(this).attr('path-type') == 'select-begin-path') {
       $(this).attr('path-type','');
     }
    });
  
   $('#diceRoller').click(function() {
    $('#dice1').text(Math.floor(Math.random()*6)+1);
    $('#dice2').text(Math.floor(Math.random()*6)+1);
    $(this).attr('disabled',true);
   });
  });
  
  //function Board(playerTurn, piecesPosition, gamePhase, gameBegginingType, container)
  function Board(){
   this.buildBoard = function  (container) {
    var board = $('&lt;table&gt;&lt;/table&gt;').attr('id','board');
    var row, cell,containerHeight,containerWidth;
    for (var i=0; i&lt;10; i++){
     row = $('&lt;tr&gt;&lt;/tr&gt;').attr('id',i+1);
     for (var j=0; j&lt;20; j++){
      cell = $('&lt;td&gt;&lt;/td&gt;');
      cell.attr('path-type','');
      if ((j == 0 || j == 19) &amp;&amp; (i &gt;= 3) &amp;&amp; (i &lt;= 6)) {
       cell.addClass('behind-goal');
      } 
      else if ((j &gt; 0) &amp;&amp; (j &lt; 19)){
       cell.attr('id',String.fromCharCode(j+96));
       cell.addClass("soccer-field");
      };
      row.append(cell);
     }
     board.append(row);
    }
    $('#'+container).append(board);
   };
  
   this.calculateHorizontalDistance = function (sq1,sq2) {
    var column1 = sq1.substring(0,1).charCodeAt(0);
    var column2 = sq2.substring(0,1).charCodeAt(0);
    return ( Math.abs(column1-column2) );
   };
  
   this.calculateVerticalDistance = function (sq1, sq2) {
    var row1 = parseInt(sq1.substring(1));
    var row2 = parseInt(sq1.substring(1));
    return ( Math.abs(row1-row2) );
   };
  
   this.calculateDistanceSquares = function(sq1, sq2){
    return(this.calculateVerticalDistance(sq1,sq2)+this.calculateHorizontalDistance(sq1,sq2));
   }
  }
  
  var board = new Board();
   board.buildBoard('left');</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#left table{
   width: 60em;
   height: 25em;
   border:0.2em solid black;
   border-collapse:collapse;
  }
  
  #left table tr{
   height: 2.5em;
   
  }
  
  #left table tr td{
   width: 3.33em;
  }
  
  
  td.soccer-field{
   border: 0.1em solid black;
  }
  
  td.behind-goal{
   background-color: #F8FAB4;
  }
  
  td[path-type*="path"]{
   border: 0.15em solid #F8FAB4;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="boardContainer"&gt;
   &lt;div id="right"&gt;
    &lt;p id="dice1"&gt;&lt;/p&gt;&lt;p id="dice2"&gt;&lt;/p&gt; 
    &lt;button id="diceRoller"&gt;Lanzar Dados&lt;/button&gt;
   &lt;/div&gt;
   
   &lt;div id="left"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
   </code></pre>
  </div>
  </div>
  </p>
  
  <p>A little help will be really appreciate</p>