CSS，条件启用样式

Question

我正在我的网站上工作，所以即使禁用JavaScript也看起来和工作几乎相同，所以当启用JavaScript时我有一个INPUT和TEXTAREA标签我可以将鼠标放在INPUT上，TEXTAREA样式变为{{ 1}}来自display: block，如果用户专注于INPUT标签然后将一些样式应用于TEXTAREA标签，有没有办法检查CSS？谢谢大家，祝你有个美好的一天。

Answer 1

如果textarea之后的textbox比是+，则可以使用adjacent selector textarea { display: none; } input[type=text]:focus + textarea { /* Switching styles for textarea when textbox is focused*/ display: block; }

input[type=text]

Demo

  

注意：向textarea添加一个类以选择特定的类   元素，否则上面的选择器将触发所有input[type=text]和   {{1}}元素

Answer 2

是的，你可以使用Pseudo-classes进行CSS :focus

的示例

Answer 3

您可以像这样使用adjacent selector：

<强> JSFiddle Demo

<强> HTML：

Click on the text input
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>

<强> CSS

input[type=text]:focus {border:1px solid red; }
textarea { display:none; }
input[type=text]:focus + textarea {display:block; }

虽然你会注意到，当它出现时你无法实际点击并专注于textarea。

Answer 4

为避免在关注textarea之后隐藏input，请使用以下内容：

textarea:hover,textarea:focus{
    display:block;
}

请参阅demo here。