1

在我的设计中，我有一个高度为 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>

和以下CSS：

.foo { -webkit-box-shadow: rgb(116, 117, 117) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.74902) 0px 24px 30px 0px; -webkit-transition-delay: 0s; -webkit-transition-duration: 0.3499999940395355s; -webkit-transition-property: height; -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); box-shadow: rgb(116, 117, 117) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.74902) 0px 24px 30px 0px; color: rgb(85, 85, 85); display: block; font-family: 'lucida grande' , tahoma, verdana, arial, sans-serif; font-size: 11px; height: 0px; left: 20px; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: 0px; top: 0px; width: 642px; z-index: 99; cursor: pointer; }

.foo-textarea { -webkit-appearance: none; -webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-background-size: auto; -webkit-border-image: none; -webkit-box-orient: vertical; -webkit-box-shadow: rgba(0, 0, 0, 0.0352941) 0px 0px 0px 0px inset; -webkit-rtl-ordering: logical; -webkit-transition-delay: 0s, 0s; -webkit-transition-duration: 0.20000000298023224s, 0.20000000298023224s; -webkit-transition-property: border, box-shadow; -webkit-transition-timing-function: linear, linear; -webkit-user-select: text; -webkit-writing-mode: horizontal-tb; background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-size: auto; border-bottom-color: rgb(223, 223, 223); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(223, 223, 223); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(223, 223, 223); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(223, 223, 223); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; box-shadow: rgba(0, 0, 0, 0.0352941) 0px 0px 0px 0px inset; box-sizing: border-box; color: rgb(85, 85, 85); cursor: auto; display: block; font-family: 'Helvetica Neue' , Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; height: 140px; letter-spacing: normal; line-height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 10px; margin-top: 0px; min-height: 20px; outline-color: rgb(85, 85, 85); outline-style: none; outline-width: 0px; overflow-x: hidden; overflow-y: hidden; padding-bottom: 9px; padding-left: 9px; padding-right: 9px; padding-top: 9px; position: relative; resize: none; text-align: start; text-indent: 0px; text-shadow: none; text-transform: none; vertical-align: middle; white-space: pre-wrap; width: 642px; word-spacing: 0px; word-wrap: break-word; writing-mode: lr-tb; }

上面代码的实时 JS Fiddle 是http://jsfiddle.net/VHsKc/1/。我的问题是，当我将文本框悬停时，我看到手形光标在它上面。这可能是因为在具有“foo”类的 div 上应用了“cursor:pointer”样式，此时它位于具有绝对定位的文本框后面（位置：绝对；左：0px；顶部：0px；）。但是此时它的高度为0，为什么它显示手形光标？这可以解决吗？当我悬停文本框时，我不希望应用“foo”div 类。

4

3 回答 3

2

我会这样做的方式设置.foo为display: none;. 在您的 jQuery 中，因为我假设您想要为 height 元素设置动画，所以首先将 css 显示设置为阻塞，然后执行动画。

TRIGGER
    $('.foo').css('display','block');
    $('.foo').animate(YOUR ANIMATION);
于 2013-03-18T18:24:15.067 回答
1

将z-index开启设置.foo为 -1。在click()增加其高度的处理程序中，将.foo' 的z-index属性更改回 99。

于 2013-03-18T18:23:02.150 回答
0

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

http://jsfiddle.net/VHsKc/4/

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

您可能需要稍后根据需要将 LI 的高度设置为自动

于 2013-03-18T18:25:58.350 回答