Question

我遇到一个问题，我无法在网上的任何地方找到答案。

在我的项目中，我想要一张照片，当我将它悬停时，我想要一个textarea出现一些文字。这部分工作得非常好。

让我感到困惑的部分是我还希望它保持不透明度：1当光标聚焦在textarea中时。

我想尽可能使用CSS来实现这一点。

我可以让textarea：焦点工作，因为我可以轻松地改变背景颜色。

这里有JS小提琴向大家展示： http://jsfiddle.net/X7Qu6/

HTML：

<div class="charpicture">
    <div class="BACKGROUNDdiv"><span class="BACKGROUNDtitle">Background</span>
        <textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales erat justo, nec fermentum mauris tristique vitae. Sed dignissim dapibus imperdiet. Morbi blandit in mi ac tincidunt. Donec at purus. </textarea>
    </div>
</div>

CSS：

.charpicture:hover .BACKGROUNDdiv,
.BACKGROUNDdiv:hover{opacity:1;}
.BACKGROUNDdiv textarea:focus{background:green;opacity:1;}

Answer 1

您的textarea位于BACKGROUNDdiv内部，因此当它被隐藏（opticity:0）时，没有选项可以使其任何内容可见。 Textarea和你的背景必须是独立的。通过一些相对/绝对定位可以实现重叠。

示例：http://jsfiddle.net/X7Qu6/1/

这就是你在找什么？

textarea：不透明的焦点不起作用

1 个答案: