Question

I have something very simple but I can not make it work correctly in Webkit and Mozilla

This is my HTML

<li style="padding-bottom: 10px;" class='product'>
  <span class ='handle' style="cursor:move; float:left; margin-top:40px; margin-right:8px; margin-bottom:30px; display:none;">
          <%= image_tag "page/arrow.png"%>
  </span>

<table >
    <tr style="border:5px; solid: #444">
      <td class="product_contents" style="vertical-align: top;" >
        <div class="product_contents" style="width: 480px; font-size: 100%; font-weight: bold; color: #333; margin-bottom: 10px; word-wrap: break-word; overflow: auto;">
         STUFF HERE
        </div>
        <p class="product_contents" style="width: 480px; font-size: 93%; line-height: 150%; word-wrap: break-word; overflow: auto;">
      MORE STUFF HERE
        </p>
      </td>
    </tr>
  </table>
</li>

And this is my JQuery:

jQuery(function($) {
  $(".product").mouseenter(
    function () { 
      $(this).find(".handle").css('display', 'inline'); //show();
      $(this).css('background-color','#fffdef');
      $(this).find(".product_contents").css('width', '450px');
  });
  $(".product").mouseleave(
    function () {
      $(this).find(".handle").css('display', 'none'); //.hide();
      $(this).css('background-color','#ffffff');
      $(this).find(".product_contents").css('width', '480px');
  });
  });

Nothing fancy here at all and it works as I expect in Firefox. The image in handle appears on the left and it displaces the content to the right, the content also change colors and size to match the image. PErfect.
But in Webkit it changes the color and the size but there is no displacement. What I want to achieve is pretty basic, there is a better approach?
I can use Jquery but I can not use any plugin.

Answer 1

I’m not sure if I understood your problem right, but I would recommend to try jQuery’s show/hide functions:

$(this).find(".handle").show();
$(this).find(".handle").hide();