Html 文本区域：不透明度不工作的焦点

我有一个问题，我在网上任何地方都找不到答案

在我的项目中，我希望有一张图片，当悬停它时，我希望一个文本区域显示一些文本。这部分工作得很好

让我感到困扰的是，当光标聚焦在文本区域时，我还希望它保持不透明度：1

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

我可以让textarea:focus工作，因为我可以让它很容易地改变背景颜色

以下是JS小提琴，向大家展示：

HTML:

---

您的textarea位于BACKGROUNDdiv内部，因此当它被隐藏时（

opticity:0

），没有任何选项使其任何内容可见。Textarea和您的背景必须是独立的。通过一些相对/绝对定位可以实现重叠

例如：

---

这就是你想要的吗？

如果div的不透明度为0；里面的任何东西都将被取消。原始的不透明度为0，因为我不想看到它，除非我悬停或聚焦它。我试图理解你的问题。当光标悬停时，您希望文本区域淡入淡出。但是，当您在文本区域内单击时，无论光标是否在文本区域中，您都希望它保持可见。对吗？对，对。这正是我想要实现的——我错过了一些级联逻辑。非常感谢。

<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>

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