Question

我有一张桌子（是的，我知道，但我无法控制是否使用表格），每个单元格包含一个div，每个div中都有一个表单元素。使用CSS将表格宽度设置为100％宽度。表格单元格中的所有div都有5px的余量以提供一些空间。所有表单元素（输入，选择，textareas）也设置为100％宽度，以便使用整个屏幕（根本不是我的想法！）。

我需要做的是在表单元格中悬停div时，通过绝对定位从文档流中删除textarea（恢复其调整大小功能而不会弄乱布局），给它一个更高的z-index然后在mouseleave上将其恢复到原始状态。

目前我所拥有的是：

$(document).ready(function() {
$('table tr td div div.textareaHolder').mouseenter(function() {
    $(this).css({
        position : 'absolute',
        zIndex : '100'
        });
});
    $('table tr td div div.textareaHolder').mouseleave(function() {
    $(this).css({
        position : 'static',
        width : '100%',
        height : '100%',
        zIndex : ''
        });
});
});

还将textarea恢复为原始大小。

Answer 1

你可以尝试这个类而不是js

 .txtholder
    {
     position:static;
     width:100%;
     height:100%;
    }

   .txtholder:hover
     {
      position:absolute;
      z-index:100;
      }

Answer 2

我希望我能正确理解这个问题;你想在悬停时'展开'textarea并回到原来的状态吗？

制作 fiddle ，希望有所帮助

编辑：

好吧，在Firefox中， this updated fiddle 可以正常使用，但在Chrome中，textarea会出现癫痫发作，因为当您调整大小时，鼠标光标会稍微改变其位置，多次启动悬停状态。

您可以完全停用textarea { resize: none; }的用户调整大小，或仅使用

定位Chrome

@media screen and (-webkit-min-device-pixel-ratio:0) {
   textarea { resize: none; }
}

（或通过Modernizr）并为Firefox留下调整大小。

使用textarea调整大小功能而不会破坏布局

2 个答案: