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

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

将CSS嵌套在CSS中

3 个答案: