我試圖在將滑鼠懸停在聯系表單上時更改它的占位符文本的顏色。這是否可以僅使用 html/CSS 或是否需要 javascript？
您將在下面的代碼中看到，我已將聯系表單的每個輸入欄位放在其自己的 div 中，以便在頁面上正確構建它，這會導致一些冗長而混亂的代碼。但除此之外它運作良好。我將輸入欄位的背景設定為在懸停時更改。
我不明白的是為什么在表單上使用懸停選擇器使文本加粗對占位符文本和輸入文本都有效；但是，更改懸停顏色僅適用于輸入文本，不適用于占位符。
我嘗試在 SCSS 檔案的懸停選擇器中嵌套 ::placeholder 選擇器（以及它在各種 Web 瀏覽器中的對應選擇器），以在懸停時更改顏色，但沒有運氣。
有沒有人對如何在懸停時更改此占位符文本顏色有任何建議？
我在下面包含了網站的一些圖片和我的代碼。
謝謝！
聯系表原樣。 懸停時的聯系表；占位符文本顏色不變。
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>uj5u.com熱心網友回復：
這對我有用！
.input {
}
.input::placeholder {
color: red;
}
.input:hover::placeholder {
color: blue;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/373256.html
下一篇：搜索兩個字符之間的字串