Wie füge ich mit CSS Hover-Effekte zu benutzerdefinierten Schaltflächen im Kontrollkästchen-Stil hinzu?

Hover-Effekte für benutzerdefinierte Schaltflächen im Kontrollkästchen-Stil in CSS

Beim Erstellen benutzerdefinierter Kontrollkästchen, die Schaltflächen ähneln, möchten Sie möglicherweise Hover-Effekte hinzufügen Effekte zur Verbesserung des Benutzererlebnisses. So erreichen Sie das mit CSS:

HTML:

<code class="html"><div id="ck-button">
   <label>
      <input type="checkbox" value="1"><span>red</span>
   </label>
</div></code>

CSS:

<code class="css">#ck-button:hover {
    background:red;
}</code>

Dieser Code zielt auf das #ck-button-Element mithilfe der Pseudoklasse :hover ab, wenn der Benutzer mit der Maus darüber fährt. Die Hintergrundeigenschaft wird dann auf Rot gesetzt und ändert die Hintergrundfarbe der Schaltfläche beim Hover.

Demo:

http://jsfiddle.net/zAFND/4/

Das obige ist der detaillierte Inhalt vonWie füge ich mit CSS Hover-Effekte zu benutzerdefinierten Schaltflächen im Kontrollkästchen-Stil hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!