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

Hover-Effekte auf Schaltflächen im Kontrollkästchen-Stil mit CSS implementieren

Das Erstellen von schaltflächenähnlichen Erscheinungsbildern für Kontrollkästchen mit CSS ist eine gängige Praxis. Während die visuelle Verbesserung effektiv erreicht werden kann, kann das Fehlen von Hover-Effekten die Benutzerinteraktivität einschränken. In diesem Artikel geht es um das Problem des Hinzufügens von Hover-Effekten zu Schaltflächen im Kontrollkästchen-Stil.

Eine Beispielimplementierung mit HTML und CSS wird bereitgestellt:

HTML:

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

CSS:

<code class="css">div label input {
  margin-right: 100px;
}

body {
  font-family: sans-serif;
}

#ck-button {
  margin: 4px;
  background-color: #EFEFEF;
  border-radius: 4px;
  border: 1px solid #D0D0D0;
  overflow: auto;
  float: left;
}

#ck-button label {
  float: left;
  width: 4.0em;
}

#ck-button label span {
  text-align: center;
  padding: 3px 0px;
  display: block;
}

#ck-button label input {
  position: absolute;
  top: -20px;
}

#ck-button input:checked + span {
  background-color: #911;
  color: #fff;
}

#ck-button:hover {
  background: red;
}</code>

Um den Hover-Effekt zu aktivieren, wird dem Mix eine neue CSS-Regel hinzugefügt:

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

Diese Regel ändert die Die Hintergrundfarbe der Schaltfläche wird rot, wenn der Benutzer mit der Maus darüber fährt, was das gewünschte visuelle Feedback liefert und die Benutzerfreundlichkeit verbessert.

Live-Demo:

[Sehen Sie sich die Live-Demo an JSFiddle](http://jsfiddle.net/zAFND/4/)

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