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中所期望的那样工作。句柄中的图像显示在左侧，它将内容替换为右侧，内容也会更改颜色和大小以匹配图像。完善。但是在Webkit中，它改变了颜色和大小，但没有位移。我想要实现的是非常基本的，还有更好的方法吗？我可以使用Jquery但我不能使用任何插件。

Answer 1

我不确定我是否理解你的问题，但我建议尝试使用jQuery的show / hide功能：

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

Answer 2

您可以使用CSS display 属性隐藏元素，并将其设置为 none 。

$("element").style.display = "none"; // hide element

$("element").style.display = "block"; // show element (or inline)

Answer 3

这个在Firefox中适用于我，而Conkeror（这是令人惊讶的）失败了，而SRWare Iron（这是一个基于Chrome的浏览器）则失败了。

问题似乎与表在<li>元素内的事实有关。出于某种原因，Firefox将此表视为内联元素，将其他浏览器视为块元素。由于它是一个块元素，因此表被推到下一行，并且不会移位，因为句柄位于前一行。将表格的显示样式更改为inline-table为我解决了问题。

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

3 个答案: