在 CSS 中嵌套 CSS答案

【问题标题】：Nesting CSS inside CSS在 CSS 中嵌套 CSS
【发布时间】：2013-11-18 06:03:58
【问题描述】：

我正在制作一个简单的社交网络，并在文本框中放置了占位符。我正在对占位符进行样式设置，以便它们具有颜色，但该颜色与悬停时文本框的颜色相同。你不会再看到占位符了。我使用的造型方法是：

::-webkit-input-placeholder {
    color: #73318e;
}

我想把这个放在里面

#type:hover, #input:hover {

}

当您悬停时，占位符颜色会发生变化。

【问题讨论】：

标签： html css placeholder

【解决方案1】：

这不是你要找的吗：

#input:hover::-webkit-input-placeholder
{
    color: #73318e;
}

jsFiddle

【讨论】：

是的，谢谢。我尝试使用 javascript/jquery 执行此操作，但我意识到占位符没有 id/class，所以我无法使用 js 访问它们

【解决方案2】：

似乎可以在 Chrome 中使用：

input:hover::-webkit-input-placeholder {
    color: green;
}

http://jsfiddle.net/rudiedirkx/94LaL/

你可能已经猜到了。尚未在任何其他浏览器中测试过。

【讨论】：

【解决方案3】：

试试这个：

#myInput::-webkit-input-placeholder
{ color: #73318e; }
#myInput:hover::-webkit-input-placeholder
{ color: transparent; }

#myInput:-moz-placeholder
{
    opacity: 1; /* Removes default transparency */
    color: #73318e;
}
#myInput:hover:-moz-placeholder
{ color: transparent; }

#myInput::-moz-placeholder
{
    opacity: 1; /* Removes default transparency */
    color: #73318e;
}
#myInput:hover::-moz-placeholder
{ color: transparent; }

#myInput:-ms-input-placeholder
{ color: #73318e; }
#myInput:hover
:-ms-input-placeholder
{ color: transparent; }

工作示例： codepen.io/anon/pen/BAwEF

【讨论】：