表单占位符文本的悬停效果

Question

我试图在将鼠标悬停在联系人表单上时更改其占位符文本的颜色。这可能仅使用 html/CSS 还是 javascript 是必要的？

您会在下面的代码中看到，我已将联系表单的每个输入字段放在自己的 div 中，以便在页面上正确构建它，这会导致一些冗长而混乱的代码。但除此之外它运作良好。我将输入字段的背景设置为在悬停时发生变化。

我不明白的是为什么在表单上使用悬停选择器使文本加粗同时适用于占位符文本和输入文本；但是，更改悬停时的颜色仅适用于输入文本，不适用于占位符。

我尝试在 SCSS 文档的悬停选择器中嵌套 ::placeholder 选择器（以及它在各种 Web 浏览器中的对应选择器）以在悬停时更改颜色，但没有成功。

有没有人对如何在悬停时更改此占位符文本颜色有任何建议？

我在下面包含了网站的一些图片和我的代码。

谢谢！

Contact form as is. Contact form on hover; placeholder text color not changing.

HTML & CSS 代码

.contact-form {
    text-align: center;
    justify-content: center;
    position: relative;
}
    .name {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 40vw;
        padding: 0;
    }
            .first {
                float:left;
                width: 50%;
                padding: 0.5em;
                padding-left: 0;
                margin: 0;
            }
                    .form-control-first {
                        color: #878F93;
                        background-color: white;
                        border: none;
                        border-radius: 1em;
                        box-shadow: rgba(0, 0, 0, 0.1) 0em 0em 1em 0em;
                        padding: 1em;
                        font-family: Circe;
                        font-weight: 300;
                        font-size: 1em;
                        margin-top: 1em;
                        margin-bottom: 1em;
                        width: 100%;
                    }
                    .form-control-first:hover {
                        color: white;
                        font-weight: 600;
                        background-color: #AEBDB2;
                        cursor: pointer;
                    }
                    .form-control-first:focus {
                        outline: none;
                        pointer-events: none;
                    }
            .last {
                float:left;
                width: 50%;
                padding: 0.5em;
                padding-right: 0;
                margin: 0;
            }
                    .form-control-last {
                        background-color: white;
                        color: #878F93;
                        border: none;
                        border-radius: 1em;
                        box-shadow: rgba(0, 0, 0, 0.1) 0em 0em 1em 0em;
                        padding: 1em;
                        font-family: Circe;
                        font-weight: 300;
                        font-size: 1em;
                        margin-top: 1em;
                        margin-bottom: 1em;
                        width: 100%;
                    }
                    .form-control-last:hover {
                        color: white;
                        font-weight: 600;
                        background-color: #AEBDB2;
                        cursor: pointer;
                    }
                    .form-control-last:focus {
                        outline: none;
                        pointer-events: none;
                    }
    .email-message {
        position: relative;
        top: 5.5em;
        bottom: 0;
        left: 0;
        right: 0;
        padding-top: 0em;
        margin: auto;
        width: 40vw;
    }
        .form-control-email {
            background-color: white;
            color: #878F93;
            border: none;
            border-radius: 1em;
            box-shadow: rgba(0, 0, 0, 0.1) 0em 0em 1em 0em;
            padding: 1em;
            font-family: Circe;
            font-weight: 300;
            font-size: 1em;
            margin: 0;
            margin-top: 0.5em;
            margin-bottom: 0.5em;
            width: 100%;
        }
        .form-control-email:hover {
            color: white;
            font-weight: 600;
            background-color: #AEBDB2;
            cursor: pointer;

        }
        .form-control-email:focus {
            outline: none;
            pointer-events: none;
        }
        .form-control-message {
            background-color: white;
            color: #878F93;
            border: none;
            border-radius: 1em;
            box-shadow: rgba(0, 0, 0, 0.1) 0em 0em 1em 0em;
            padding: 1em;
            text-align: left;
            font-family: Circe;
            font-weight: 300;
            font-size: 1em;
            margin: 0;
            margin-top: 0.5em;
            margin-bottom: 0.5em;
            width: 100%;
            height: 30vh;
            max-width: 100%;
            max-height: 30vh;
        }
        .form-control-message:hover {
            color: white;
            font-weight: 600;
            background-color: #AEBDB2;
            cursor: pointer;
        }
        .form-control-message:focus {
        outline: none;
        pointer-events: none;
        }
.form-control-submit {
    justify-content: center;
    align-items: center;
    padding: 0.75em;
    padding-left: 2em;
    padding-right: 2em;
    font-family: Circe;
    font-weight: bold;
    font-size: 0.75em;
    text-transform: uppercase;
    color:white;
    border-radius: 2em;
    background-color: #207CB4;
    border: none;
    display: inline-block;
    margin: 0px, 2px;
    text-decoration: none;
}
.form-control-submit:hover {
    color: #174456;
    background-color: #FFE98E;
    cursor: pointer;
}
                    ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
                        color:    #878F93;
                    }
                    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                    color:    #878F93;
                    opacity:  1;
                    }
                    ::-moz-placeholder { /* Mozilla Firefox 19+ */
                    color:    #878F93;
                    opacity:  1;
                    }
                    :-ms-input-placeholder { /* Internet Explorer 10-11 */
                    color:    #878F93;
                    }
                    ::-ms-input-placeholder { /* Microsoft Edge */
                    color:    #878F93;
                    }

                    ::placeholder { /* Most modern browsers support this now. */
                    color:    #878F93;
                    }

                <div class="contact-form">
                <form id="contact-form" method="post">
                <div class="name">
                    <div class="first">
                        <input name="first-name" type="text" class="form-control-first" placeholder="First Name" required>
                    </div>
                    <div class="last">
                    <input name="last-name" type="text" class="form-control-last" placeholder="Last Name" required>
                    </div>
                    <br>
                </div>
                <div class="email-message">
                    <input name="email" type="text" class="form-control-email" placeholder="Email" required>
                    <br>
                    <textarea name="message" class="form-control-message" placeholder="Type your message here." row="4" required></textarea>
                    <br>
                    <input type="submit" class="form-control-submit" value="Submit"></div>
                </form>
            </div>

Answer 1

这对我有用！

.input {
}

.input::placeholder {
  color: red;
}

.input:hover::placeholder {
  color: blue;
}

表单占位符文本的悬停效果

Hover effects on Form Placeholder Text

html

css

forms

hover