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」スタイルが原因である可能性があり、現時点では絶対配置 (position: absolute;left: 0px; top: 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 の高さを auto に設定する必要がある場合があります。

于 2013-03-18T18:25:58.350 に答える