wie Hover-Effekt zu deaktivieren, wenn fokussiert einmal

.form-signin input[type="text"]:focus{ 
 
\t 
 
\t border: 1px solid blue; 
 
} 
 

 
.form-signin input[type="password"]:focus{ 
 
\t 
 
\t border: 1px solid blue; 
 
\t outline: none; 
 
\t box-shadow:none; 
 
\t 
 
} 
 

 

 

 
.form-signin input[type="text"]:hover{ 
 
\t 
 
\t border: 1px solid black; 
 
\t box-shadow: none; 
 
} 
 

 
.form-signin input[type="password"]:hover{ 
 
\t 
 
\t border: 1px solid black; 
 
\t outline: none; 
 
\t box-shadow:none; 
 
\t 
 
} 
 

 
.form-signin input[type="text"] 
 
{ 
 
\t border: 1px solid #8c8c8c; 
 
    margin-bottom: 10px; 
 
\t width: 500px; 
 
    border-bottom-left-radius: 0; 
 
    border-bottom-right-radius: 0; 
 
} 
 
.form-signin input[type="password"] 
 
{ 
 
    display: block; 
 
\t margin: 10px auto; 
 
\t width: 500px; 
 
\t border: 1px solid #8c8c8c; 
 
\t -moz-border-radius: 0px; 
 
    -webkit-border-radius: 0px; 
 
    border-radius: 0px; 
 
}

<html> 
 
</body> 
 

 
<form class="form-signin"> 
 
       <input type="text" class="form-control" method="post" placeholder="Email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email'" required /> 
 
       <input type="password" class="form-control" placeholder="Password" onfocus="this.placeholder = ''" onblur="this.placeholder = 'password'" required> 
 

 
    </form> 
 

 
</body> 
 
</html>

i hinzugefügt haben: schweben und: Fokus auf Eingabefelder für E-Mail und Passwort auf meiner Webseite. Das Problem ist, wenn einmal beide Felder fokussiert sind, d. h. angeklickt, bleibt der Hover-Effekt aktiv, ich möchte das deaktivieren. genauer gesagt nehmen wir an, ich Grenze zu sein, gebe: für Farbe Eigenschaft: schweben und: Fokus als

Standard

folgt -> grau

schweben -> schwarz

Fokus -> blau

also nach obigen Annahmen nach einem Klick auf eines der Eingabefelder, BOX sollte blau und egal, wenn meine Maus über die Box schwebt, sollte es blau bleiben, aber verdammt! Box wird schwarz> :(Ich hoffe, dass ich nicht Ihr Gehirn oben bin verwirren.

Sie für ein besseres Verständnis geben, was ich i Link gehe acieve wollen da unten für Login-Seite des TopCoder

https://accounts.topcoder.com/connect

hier ist der Code-Schnipsel zeigt, welche Ausgabe ich habe

Quelle

2016-07-05 yugansh sharma

object.addEventListener ("mouseover", function() {; –

es sieht aus wie eine Schachtel Schatten gibt und dicken Rand Rendering auf schweben. ich habe diesen Code in dem Inspektoren und es scheint es Ihr Hover Problem entledigt.

input.widest.ng-pristine.ng-empty.ng-invalid.ng-invalid-required.ng-touched:hover { 
    box-shadow: none; 
    border: 1px solid #b7b7b7; 
}

Quelle

2016-07-05 21:29:15 Vcasso

da ich nicht direkt den code code von der reference-website verwende, kann ich nicht tun, was ich gerade gesagt habe, ich habe die frage bearbeitet und meinen CSS- und HTML-code hinzugefügt, bitte kannst du dich darauf beziehen und mir antworten? jede Art von Hilfe würde geschätzt werden –

Eigentlich habe ich Ihr Problem missverstanden. Hier ist, was Sie versuchen sollten: .form-signin Eingabe [Typ = "Text"]: Hover: nicht (: Fokus) { \t Grenze: 1px solid schwarz; \t box-shadow: keine; } .form-signin Eingabe [Typ = "Passwort"]: Hover: nicht (: Fokus) { \t Grenze: 1px solid schwarz; \t Umriss: keine; \t box-shadow: keine; \t } Ich habe gerade hinzugefügt: nicht (: Fokus). – Vcasso

wie Hover-Effekt zu deaktivieren, wenn fokussiert einmal

Antwort

Verwandte Themen