html - 文本区域 :focus with opacity not working

Question

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

在我的元素中，我想要一张图片，当悬停它时，我想要一个带有一些文本的文本区域。这部分工作得很好。

让我烦恼的部分是，当光标聚焦在文本区域时，我还希望它保持不透明度:1。

我只想在可能的情况下使用 CSS 来实现这一点。

我可以让 textarea:focus 正常工作，因为我可以让它轻松更改背景颜色。

这是 JS Fiddle 向大家展示的: 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/

这就是你要找的吗？