0

我有一个表格（是的，我知道，但我无法控制是否使用表格），每个单元格都包含一个 div，每个 div 中都有一个表单元素。使用 CSS 将表格宽度设置为 100% 宽度。表格单元格中的所有 div 都有 5px 的边距以留出一些空间。所有表单元素（输入、选择、文本区域）也设置为 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 返回到其原始大小。

4

2 回答 2

2

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

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

   .txtholder:hover
     {
      position:absolute;
      z-index:100;
      }
于 2012-11-07T12:44:57.643 回答
0

我希望我正确理解了这个问题；您想textarea在悬停时“扩展”并回退到原始状态？

做了一个小提琴，希望有帮助

编辑：

好的，在 Firefox 中，这个更新的小提琴可以正常工作，但是在 Chrome 中，文本区域会被占用，因为当你调整它的大小时，你的鼠标光标会在边界周围稍微改变它的位置，多次触发悬停状态。

您可以完全禁用用户调整大小textarea { resize: none; }，或仅针对 Chrome

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

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

于 2012-11-07T12:53:10.107 回答