在textarea上应用0高度div的类

In my design I have a div with 0 height (its height will be increased via some JS code on some anchor click) and a textbox. The HTML is:

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

and the following CSS:

和以下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; }

The live JS Fiddle for the above code is http://jsfiddle.net/VHsKc/1/. My issue is that when I hover the textbox I am seeing hand cursor over it. It can be because of "cursor:pointer" style applied on div having "foo" class and at this moment it is behind the textbox with absolute positioning (position: absolute;left: 0px; top: 0px;). But it is having 0 height at this moment then why it is showing hand cursor? Can this be fixed? I don't want the "foo" div classes getting applied when I am hovering the textbox.

上面代码的实时JS小提琴是http://jsfiddle.net/VHsKc/1/。我的问题是当我悬停文本框时,我看到手形光标在它上面。这可能是因为“cursor:pointer”样式应用于具有“foo”类的div,此时它位于具有绝对定位的文本框后面(position:absolute; left:0px; top:0px;)。但是此刻它的高度为0,那为什么它会显示手形光标?这可以修复吗?当我悬停文本框时,我不希望“foo”div类被应用。

3 个解决方案

#1

The way I would do it is set .foo to display: none;. In your jQuery, since I assume you want to animate the height element, set the css display to block first, then do your animation.

我这样做的方法是将.foo设置为display:none;。在你的jQuery中,因为我假设你想要为height元素设置动画,所以先将css显示设置为block,然后再动画。

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

3 个解决方案

#1

更多相关文章

随机推荐