How to prevent a jQuery widget appended to a selectable from growing bigger onmouseover?

How to prevent a jQuery widget appended to a selectable from growing bigger onmouseover?

Hello dear jQuery UI developers and users!

In an HTML game I have created a custom jQuery widget called table representing a rectangle green table with up to 4 players sitting at it:


In the above screenshot 4 such tables are appended to a #tables3 selectable by the following code:

  1. var tablesList = $('#selectable').selectable();

  3. var table1 = $('<li/>').appendTo(tables3).table({ gid: 3 });
  4. var table2 = $('<li/>').appendTo(tables3).table({
  5.     gid: 104,
  6.     player0: {
  7.         rep: Math.random(),
  8.         photo: 'http://afarber.de/images/farber.jpg'
  9.     }
  10. });
  11. var table3 = $('<li/>').appendTo(tables3).table({
  12.     gid: 115,
  13.     player0: {
  14.         rep: Math.random()
  15.     },
  16.     player1: {
  17.     },
  18.     player2: {
  19.         rep: Math.random(),
  20.         photo: 'https://raspasy.de/raspasy/images/male_sad.png'
  21.     },
  22.     player3: {
  23.         rep: Math.random(),
  24.         photo: 'https://raspasy.de/raspasy/images/female_happy.png'
  25.     }
  26. });
  27. var table4 = $('<li/>').appendTo(tables3).table({
  28.     gid: 115,
  29.     player0: {
  30.         photo: 'https://raspasy.de/raspasy/images/female_happy.png'
  31.     },
  32.     player1: {
  33.         rep: Math.random(),
  34.         photo: 'https://raspasy.de/raspasy/images/female_sad.png'
  35.     },
  36.     player2: {
  37.         rep: Math.random(),
  38.         photo: 'https://raspasy.de/raspasy/images/male_sad.png'
  39.     },
  40.     player3: {
  41.         rep: Math.random(),
  42.         photo: 'https://raspasy.de/raspasy/images/female_happy.png'
  43.     }
  44. });

The #tablesList has the CSS property overflow-y: set to scroll:

  1. #selectable .ui-selecting { background: #FECA40; }
  2. #selectable .ui-selected  { background: #F39814; color: white; }
  3. #selectable { 
  4.     list-style-type:    none; 
  5.     margin:             0;
  6.     padding:            0;
  7.     height:             500px;
  8.     overflow-y:         scroll;
  9. }

My problem is: when I hover the mouse pointer over one of the table widgets, then it seems to change into some CSS state with slightly bigger dimensions and thus pushes the right tables to the next row in the #tables3:

Screenshot 1 (the mouse is over the second table):


Screenshot 2 (the mouse is over the third table):

As you can see, the fourth table is always pushed down. And if I move the mouse pointer away, this creates an annoying flickering effect, where the 4th table changes between the 1st and 2nd rows.

My question is how to prevent this please? I have tried inspecting CSS in the browser dev. tools but failed to spot any related CSS property.

My CSS file style.css is listed below and you can see the ugly effect by visiting the game web page (it requires Google oAuth though, sorry for that):

  1. #selectable .ui-selecting { background: #FECA40; }
  2. #selectable .ui-selected  { background: #F39814; color: white; }
  3. #selectable { 
  4.     list-style-type:    none; 
  5.     margin:             0;
  6.     padding:            0;
  7.     height:             500px;
  8.     overflow-y:         scroll;
  9. }

  11. body {
  12.     font-family: Arial, Helvetica, sans-serif;
  13. }

  15. fieldset {
  16.     border: 0px;
  17. }

  19. .ui-draggable, 
  20. .ui-droppable {
  21.     background-position: top;
  22. }

  24. #gameDiv {
  25.     position: relative;
  26. }

  28. #gameCanvas {
  29.     background: radial-gradient(#FFFFFF, #99CC99);
  30. }

  32. :-webkit-full-screen,
  33. :-moz-full-screen,
  34. :-ms-fullscreen,
  35. :fullscreen {
  36.     background: #FFF;
  37. }

  39. #lobbyTable {
  40.     background: #FFF;
  41. }

  43. #kukuSlider {
  44.     width:          300px;
  45.     margin:         15px;
  46. }

  48. #red, #green, #blue {
  49.     width:          300px;
  50.     margin:         15px;
  51. }

  53. #swatch {
  54.     padding:        10px;
  55.     margin:         5px;
  56.     color:          #FFF;
  57. }

  59. #red   .ui-slider-range  { background:   #ef2929; }
  60. #red   .ui-slider-handle { border-color: #ef2929; }
  61. #green .ui-slider-range  { background:   #8ae234; }
  62. #green .ui-slider-handle { border-color: #8ae234; }
  63. #blue  .ui-slider-range  { background:   #729fcf; }
  64. #blue  .ui-slider-handle { border-color: #729fcf; }

  66. .raspasy-player {
  67.     position:           relative;
  68.     background:         #FFF no-repeat center;
  69.     background-size:    contain;
  70.     box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
  71.     width:              160px;
  72.     height:             120px;
  73. }

  75. .raspasy-player-name {
  76.     position:           absolute;
  77.     font-size:          18px;
  78.     background:         #FFF;
  79.     color:              #000;
  80.     text-align:         left;
  81.     left:               0;
  82.     bottom:             0;
  83.     padding:            2px;
  84.     width:              156px;
  85.     height:             20px;
  86. }

  88. .raspasy-player-bid {
  89.     position:           absolute;
  90.     font-size:          18px;
  91.     background:         #FFF;
  92.     color:              #000;
  93.     text-align:         right;
  94.     right:              0;
  95.     top:                0;
  96.     padding:            2px;
  97.     width:              36px;
  98.     height:             20px;
  99. }

  101. .raspasy-player-trix {
  102.     position:           absolute;
  103.     font-size:          18px;
  104.     background:         #FFF;
  105.     color:              #000;
  106.     text-align:         right;
  107.     right:              0;
  108.     bottom:             0;
  109.     padding:            2px;
  110.     width:              36px;
  111.     height:             20px;
  112. }

  114. .raspasy-player-rep {
  115.     position:           absolute;
  116.     right:              0;
  117.     bottom:             0;
  118. }

  120. .raspasy-player-bad-big {
  121.     position:           relative;
  122.     background:         #C00;
  123.     width:              50px;
  124.     height:             1px;
  125.     display:            none;
  126. }

  128. .raspasy-player-bad-small {
  129.     position:           relative;
  130.     background:         #C00;
  131.     width:              25px;
  132.     height:             1px;
  133.     display:            none;
  134. }

  136. .raspasy-player-good-big {
  137.     position:           relative;
  138.     background:         #6C6;
  139.     width:              50px;
  140.     height:             1px;
  141.     display:            none;
  142. }

  144. .raspasy-player-good-small {
  145.     position:           relative;
  146.     background:         #6C6;
  147.     width:              25px;
  148.     height:             1px;
  149.     display:            none;
  150. }

  152. .raspasy-table {
  153.     position:           relative;
  154.     background:         #A3DD8E;
  155.     color:              white;
  156.     margin:             50px; 
  157.     float:              left; 
  158.     border:             4px solid #91BCE5;
  159.     border-radius:      16px;
  160.     box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
  161.     width:              160px; 
  162.     height:             160px; 
  163. }

  165. .raspasy-table-gid {
  166.     position:           absolute;
  167.     font-size:          1.5em; 
  168.     top:                65px;
  169.     width:              100%;
  170.     color:              white;
  171.     text-align:         center; 
  172. }

  174. .raspasy-table-player0 {
  175.     position:           absolute;
  176.     left:               -40px;
  177.     top:                50px;
  178.     background:         #FFF no-repeat center;
  179.     background-size:    contain;
  180.     box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  181.     width:              80px;
  182.     height:             60px;
  183.     display:            none;
  184. }

  186. .raspasy-table-player1 {
  187.     position:           absolute;
  188.     left:               40px;
  189.     top:                -30px;
  190.     background:         #FFF no-repeat center;
  191.     background-size:    contain;
  192.     box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  193.     width:              80px;
  194.     height:             60px;
  195.     display:            none;
  196. }

  198. .raspasy-table-player2 {
  199.     position:           absolute;
  200.     left:               120px;
  201.     top:                50px;
  202.     background:         #FFF no-repeat center;
  203.     background-size:    contain;
  204.     box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  205.     width:              80px;
  206.     height:             60px;
  207.     display:            none;
  208. }

  210. .raspasy-table-player3 {
  211.     position:           absolute;
  212.     left:               40px;
  213.     top:                130px;
  214.     background:         #FFF no-repeat center;
  215.     background-size:    contain;
  216.     box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  217.     width:              80px;
  218.     height:             60px;
  219.     display:            none;
  220. }

Thank you for any hints
Alex