Javascript 正在textarea上应用0高度div的类

在我的设计中，我有一个高度为0的div（它的高度将通过一些锚点击的JS代码增加）和一个文本框。HTML是：

<div class="container">
    <textarea class="foo-textarea"></textarea>
    <div class="foo">
        <ul>
            <li><a href="#">Test1</a></li>
            <li><a href="#">Test1</a></li>
            ...          
        </ul>
    </div>
</div>

上面代码的livejsfiddle是。

---

我的问题是，当我将文本框悬停在上面时，我看到了鼠标指针。这可能是因为在具有“foo”类的div上应用了“cursor:pointer”样式，此时它位于具有绝对位置的文本框后面（位置：绝对；左侧：0px；顶部：0px；）。但此时它的高度为0，那么为什么它会显示手动光标呢？这个问题能解决吗？我不希望在悬停文本框时应用“foo”div类。

将

上的
z-index
设置为-1。在增加其高度的
click（）
处理程序中，将
.foo
的
z-index
属性更改回99。
我的方法是将
.foo
设置为
显示：无。在jQuery中，由于我假设您希望为height元素设置动画，所以首先将css显示设置为block，然后进行动画

TRIGGER
    $('.foo').css('display','block');
    $('.foo').animate(YOUR ANIMATION);

将LI项设置为高度0和溢出隐藏


以后可能需要根据需要将LIs的高度设置为“自动”
我在Firefox中看到默认光标。textarea的高度为140px。这也适用，根据给定的信息，有多种解决方案。
TRIGGER
    $('.foo').css('display','block');
    $('.foo').animate(YOUR ANIMATION);

.foo li {
    height: 0;
    overflow: hidden;
}