javascript - 在所有浏览器中显示/隐藏 DOM 元素

Question

我有一些非常简单的东西，但我无法让它在 Webkit 和 Mozilla 中正常工作

这是我的 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>

这是我的 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');
  });
  });

这里没有什么特别的，它在 Firefox 中的工作方式正如我所期望的那样。 handle 中的图像出现在左侧，并将内容移至右侧，内容也会更改颜色和大小以匹配图像。完美的。但在Webkit中，它改变了颜色和大小，但没有位移。我想要实现的目标非常基本，有更好的方法吗？我可以使用 Jquery，但无法使用任何插件。

Answer 1

我不确定我是否理解你的问题，但我建议尝试 jQuery 的显示/隐藏功能:

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