Класс 0 height div применяется на textarea

Question

В моем дизайне у меня есть div с 0 высотой (его высота будет увеличена через некоторый 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/. Моя проблема в том, что когда я наводил текстовое поле, я вижу курсор на нем. Это может быть из-за стиля «курсор: указатель», применяемого к div, имеющего класс «foo», и в данный момент он находится за текстовым полем с абсолютным позиционированием (позиция: абсолютная, левая: 0px; верх: 0px;). Но в этот момент он имеет 0 высоты, а затем почему он показывает курсор? Можно ли это исправить? Я не хочу, чтобы классы div «foo» применялись, когда я наводил курсор на текстовое поле.

Answer 1

Установите z-index на .foo на -1. В click() обработчик, который увеличивает его высоту, изменить .foo «s z-index свойство обратно 99.

Answer 2

так, как я сделал бы это установить .foo в display: none;. В вашем jQuery, так как я предполагаю, что вы хотите анимировать элемент высоты, сначала установите отображение css, а затем сделайте анимацию.

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

Answer 3

Установить предметы LI на высоту 0 и переполнение скрыто.

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

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

вам может понадобиться установить высоту авто для ЛИС позже, в зависимости от потребностей