CSS内部嵌套CSS

Question

我正在制作一个简单的社交网络，我在文本框中放置占位符。我正在设计占位符的样式，这样它们就有了颜色，但是当你悬停时，这个颜色和文本框的颜色是一样的。你就不会再看到占位符了。我使用的造型方法是：

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

我想把这个放进

#type:hover, #input:hover {

}

要做到这一点，当您悬停时，占位符颜色会发生变化。

Answer 1

这不是你要找的吗：

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

jsFiddle

Answer 2

似乎适用于Chrome：

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

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

你可能猜到了。还没有在任何其他浏览器上测试过。

Answer 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; }

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