Kann CSS die Hover-Hintergrundfarbe von „Elementen innerhalb eines „Elements' ändern?

Anpassen des Hervorhebungsfarbe

Kann CSS verwendet werden, um die Hintergrundfarbe des Listenelements (

) zu ändern, wenn der Cursor innerhalb eines

-Elements darüber bewegt wird? Element?

Klarstellung

Die ursprüngliche Frage ist hinsichtlich des gewünschten Verhaltens unklar. Es scheint, dass die Absicht darin bestand, die Hintergrundfarbe des zu ändern. Elemente.

Versuch und Ergebnisse

Versuche, die zu ändern. Die Hintergrundfarbe der Elemente hat sich als erfolglos erwiesen, da immer die Systemfarbe angewendet wird.

Alternative Lösung

Ein Ansatz, der das gewünschte Verhalten teilweise anspricht, besteht darin, das gesamte -Element hervorzuheben. Element, wenn der Cursor darüber schwebt:

<code class="css">select:hover { background-color: red; }</code>

Diese Technik weist jedoch browserspezifische Unterschiede im Verhalten auf:

• Chrome hebt das gesamte Dropdown-Menü hervor, nicht jedoch die einzelnen Optionen.
• Firefox hebt sowohl das Dropdown-Menü als auch die Optionen hervor, aber die Hervorhebung bleibt bestehen, wenn der Cursor wegbewegt wird, nachdem die Optionen sichtbar bleiben.

Fazit

Wie bereits allgemein erwähnt, Styling Eine zuverlässige Formularsteuerung ist eine Herausforderung. Weitere Informationen finden Sie in der bereitgestellten Dokumentation.

Das obige ist der detaillierte Inhalt vonKann CSS die Hover-Hintergrundfarbe von „Elementen innerhalb eines „Elements' ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：php.cn

Vorheriger Artikel：Warum werden YouTube-Iframes in Dropdown-Menüs in verschiedenen Browsern unterschiedlich dargestellt? Nächster Artikel：Wie kann man Tabellenzeilen mit jQuery dynamisch erweitern und reduzieren?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

0

2

1841

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

0

10

2009

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

0

1

1695

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...

Aus 2024-04-18 23:52:34

0

1

1595

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

0

0

1613

verwandte Themen

Mehr>

• Mittel entfernen
• So stellen Sie den Computer so ein, dass er automatisch eine WLAN-Verbindung herstellt
• So verwenden Sie HTML für die Webnavigation
• Welche Methoden gibt es, um eine Operatorüberladung in der Go-Sprache zu implementieren?
• Detaillierte Erläuterung der Nginx-Konfiguration
• Einführung in den Javascript-Spezialeffektcode
• Empfohlene Reihenfolge zum Erlernen von C++ und der C-Sprache
• So kaufen Sie Bitcoin

Beliebte Empfehlungen

• So stellen Sie CSS so ein, dass es die Anzeigeellipsen überschreitet
• So legen Sie die Schriftgröße in CSS fest
• So verwenden Sie Hover in CSS
• So legen Sie den Zeichenabstand in CSS fest
• Was sind die neuen Funktionen von CSS3?

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1417653
• 
  php入门教程之一周学会PHP

  4258751
• 
  JAVA 初级入门视频教程

  2485223
• 
  小甲鱼零基础入门学习Python视频教程

  504176
• 
  PHP 零基础入门教程

  858823

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1417653 Lernzeiten
• 
  JAVA 初级入门视频教程

  2485223 Lernzeiten
• 
  小甲鱼零基础入门学习Python视频教程

  504176 Lernzeiten
• 
  Web前端开发极速入门

  215353 Lernzeiten
• 
  零基础精通 PS 视频教程

  879245 Lernzeiten

• 
  【web前端】Node.js快速入门

  6569 Lernzeiten
• 
  国外Web开发全栈课程全集

  5111 Lernzeiten
• 
  Go语言实战之 GraphQL

  4285 Lernzeiten
• 
  550W粉丝大佬手把手从零学JavaScript

  637 Lernzeiten
• 
  python大神Mosh，零基础小白6小时完全入门

  21820 Lernzeiten

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage

• [Formular-Schaltfläche] Kontaktcode für das jQuery-Enterprise-Nachrichtenformular
• [Spezialeffekte für Spieler] Wiedergabeeffekte für HTML5-MP3-Spieluhren
• [Menünavigation] HTML5 coole Partikelanimations-Navigationsmenü-Spezialeffekte
• [Formular-Schaltfläche] Drag-and-Drop-Bearbeitungscode für visuelle jQuery-Formulare
• [Spezialeffekte für Spieler] VUE.JS imitiert den Kugou-Musik-Player-Code
• [HTML5-Spezialeffekte] Klassisches HTML5-Pushing-Box-Spiel
• [Bildspezialeffekte] jQuery-Scrollen zum Hinzufügen oder Reduzieren von Bildeffekten
• [Fotoalbumeffekte] Persönlicher CSS3-Albumcover-Hover-Zoom-Effekt

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

• [PNG material] 可爱的夏天元素矢量素材(EPS+PNG)
• [PNG material] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
• [Banner image] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
• [PNG material] 金色的毕业帽矢量素材(EPS+PNG)
• [PNG material] 黑白风格的山脉图标矢量素材(EPS+PNG)
• [PNG material] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
• [Banner image] 扁平风格的植树节banner矢量素材(AI+EPS)
• [PNG material] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！

Über uns Haftungsausschluss Sitemap

© php.cn All rights reserved