仅用HTML/CSS能否实现表单占位符hover时变色，需不需要JavaScript？

仅使用HTML/CSS即可实现占位符文本hover变色效果，无需引入JavaScript。

你之前尝试未生效的核心原因是没有正确将:hover伪类与各浏览器前缀的占位符伪元素选择器对应绑定，正确写法如下：

普通CSS实现代码 #

你可以直接在现有CSS末尾添加以下样式，即可实现hover时占位符变为白色：

/* Webkit内核浏览器（Chrome、新Edge、Safari等） */
.form-control-first:hover::-webkit-input-placeholder,
.form-control-last:hover::-webkit-input-placeholder,
.form-control-email:hover::-webkit-input-placeholder,
.form-control-message:hover::-webkit-input-placeholder {
  color: #fff;
}

/* 火狐浏览器低版本（4-18） */
.form-control-first:hover:-moz-placeholder,
.form-control-last:hover:-moz-placeholder,
.form-control-email:hover:-moz-placeholder,
.form-control-message:hover:-moz-placeholder {
  color: #fff;
  opacity: 1;
}

/* 火狐浏览器高版本（19+） */
.form-control-first:hover::-moz-placeholder,
.form-control-last:hover::-moz-placeholder,
.form-control-email:hover::-moz-placeholder,
.form-control-message:hover::-moz-placeholder {
  color: #fff;
  opacity: 1;
}

/* IE10-11、旧版Edge */
.form-control-first:hover:-ms-input-placeholder,
.form-control-last:hover:-ms-input-placeholder,
.form-control-email:hover:-ms-input-placeholder,
.form-control-message:hover:-ms-input-placeholder {
  color: #fff;
}

/* 现代标准浏览器通用写法 */
.form-control-first:hover::placeholder,
.form-control-last:hover::placeholder,
.form-control-email:hover::placeholder,
.form-control-message:hover::placeholder {
  color: #fff;
}

SCSS正确嵌套写法 #

如果你用SCSS编写，正确的嵌套逻辑是把占位符选择器放在:hover伪类的内部，示例如下：

.form-control-first {
  // 原有基础样式
  &:hover {
    // 原有hover时输入框的样式：背景色、输入文本颜色等
    &::-webkit-input-placeholder {
      color: #fff;
    }
    &:-moz-placeholder {
      color: #fff;
      opacity: 1;
    }
    &::-moz-placeholder {
      color: #fff;
      opacity: 1;
    }
    &:-ms-input-placeholder {
      color: #fff;
    }
    &::placeholder {
      color: #fff;
    }
  }
}

优化建议&现有问题修正 #

1. 你当前给每个输入框单独定义了类名，样式重复度很高，可以给所有输入框、文本域新增一个统一的公共类，比如form-control，所有公共样式都写在这个类下，不用每个输入框单独写一遍，大幅缩减代码量。
2. 现有代码中所有输入框的:focus规则里加了pointer-events: none，这个属性会导致输入框聚焦后无法响应任何鼠标操作，用户没法正常点击输入内容，建议删除该行，仅保留outline: none即可。

内容的提问来源于stack exchange，提问作者jordanrdunn