Wie ändere ich die QuickInfo-Hintergrundfarbe?

Ich habe einen Tooltip in meine HTML-Datei wie folgt erstellt:Wie ändere ich die QuickInfo-Hintergrundfarbe?

<span title="" class="duedate-warning-msg"></span>

Und ich die CSS-Eigenschaft wie folgt aus:

.duedate-warning-msg{ 
    background: url("/static/img/error.png") no-repeat scroll 14px 12px white; 
    border-color: #f5c7c7; 
    padding: .5em 0.25em 0.5em 2.5em; 
    title:"my tooltip"; 
    color: #D11006; 
} 

span:hover{ 
    position:relative; 
} 

span[title]:hover:after { 
    content: "This statement is past due."; 
    padding: 4px 8px; 
    color: white; 
    font-size:16px; 
    font-family: "open_sansregular"; 
    background: #0679ca; 
    position: absolute; 
    left: 0; 
    top: 100%; 
    white-space: nowrap; 
    z-index: 20px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222; 
    -webkit-box-shadow: 0px 0px 4px #222; 
    box-shadow: 0px 0px 4px #222; 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); 
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc); 
}

Die obige Stil erstellt Tooltip perfekt. Das einzige Problem, mit dem ich konfrontiert bin, ist, dass ich möchte, dass die Hintergrundfarbe des Tooltips blau ist. Aber es zeigt immer grau. Warum passiert es so?

Quelle

2016-07-08 Shubhangi Garg

Sie es abgesprochen Hintergrund-Bild grau gemacht; Entferne alle Zeilen, die mit 'background-image' beginnen und füge hinzu:' background: # 00F; ' – aximus

Ersetze #eeee mit blauer Farbe –

die background-image entfernen und background hinzufügen, etwa so:

span[title]:hover:after { 
    content: "This statement is past due."; 
    padding: 4px 8px; 
    color: white; 
    font-size:16px; 
    font-family: "open_sansregular"; 
    background: #0679ca; 
    position: absolute; 
    left: 0; 
    top: 100%; 
    white-space: nowrap; 
    z-index: 20px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222; 
    -webkit-box-shadow: 0px 0px 4px #222; 
    box-shadow: 0px 0px 4px #222; 
    background: #00F; 
}

Quelle

2016-07-08 11:05:18 aximus

das hat funktioniert. Vielen Dank :) –

Einfach, in background-image Eigenschaft ersetzen #cccccc mit einer Farbe Ihrer Wahl, vorausgesetzt, dass Sie die Fade-to-fast-weiß (#eeeeee) Steigung beibehalten möchten.

Quelle

2016-07-08 11:04:42

das Hintergrundbild entfernen von span[title]:hover:after

Hier ist die Arbeits Demo

Quelle

2016-07-08 11:04:59

Wie ändere ich die QuickInfo-Hintergrundfarbe?

Antwort

Verwandte Themen