Inhaltsverzeichnis
Hover-Effekt auf untergeordnetem Element deaktiviert Hover-Effekt auf übergeordnetem Element
Das Problem:
Die Lösung:
Vorherige eingeschränkte Lösung (vor 2024):
Heim Web-Frontend CSS-Tutorial Wie deaktiviere ich den Hover-Effekt für das übergeordnete Element, wenn ich in CSS mit der Maus über das untergeordnete Element fahre?

Wie deaktiviere ich den Hover-Effekt für das übergeordnete Element, wenn ich in CSS mit der Maus über das untergeordnete Element fahre?

Nov 03, 2024 pm 08:12 PM

How to Disable Hover Effect on Parent When Hovering Over Child in CSS?

Hover-Effekt auf untergeordnetem Element deaktiviert Hover-Effekt auf übergeordnetem Element

Das Problem:

Sie haben zwei verschachtelte

Elemente, und Sie möchten den Hintergrund des übergeordneten Elements .parent ändern, wenn Sie mit der Maus darüber fahren. Wenn Sie jedoch mit der Maus über das untergeordnete Element .child fahren, soll der Hintergrund des übergeordneten Elements in seinen ursprünglichen Zustand zurückkehren.

Die Lösung:

Mit reinem CSS war dies bisher nicht möglich diesen Effekt direkt erzielen. Mit der kürzlichen Einführung des :has-Selektors im Jahr 2024 ist es nun jedoch möglich, dieses Problem zu beheben:

<code class="css">.parent {
  width: 100px;
  height: 100px;
  padding: 50px;
  background: lightgray;
}

.parent:hover {
  background: lightblue;
}

.child {
  height: 100px;
  width: 100px;
  background: darkgray;
}

.child:hover {
  background: lightblue;
}

/* The solution using the :has selector */
.parent:has(.child:hover) {
  background: lightgray;
}</code>

Indem wir auf das übergeordnete Element abzielen, das über ein schwebendes untergeordnetes Element verfügt, können wir das Schweben effektiv deaktivieren Auswirkung auf das übergeordnete Element, wenn der Mauszeiger über das untergeordnete Element bewegt wird.

Vorherige eingeschränkte Lösung (vor 2024):

Vor der Einführung des :has-Selektors bestand eine Problemumgehung darin, ein Geschwisterelement zu verwenden einen ähnlichen Effekt erzielen:

<code class="css">.parent {
  width: 100px;
  height: 100px;
  padding: 50px;
}

.child {
  height: 100px;
  width: 100px;
  background: #355E95;
  transition: background-color 1s;
  position: relative;
  top: -200px;
}

.child:hover {
  background: #000;
}

.sibling {
  position: relative;
  width: 100px;
  height: 100px;
  padding: 50px;
  top: -50px;
  left: -50px;
  background: #3D6AA2;
  transition: background-color 1s;    
}

.sibling:hover {
  background: #FFF;
}</code>

Bei diesem Ansatz wurde ein Geschwisterelement erstellt, das über dem untergeordneten Element positioniert wird. Wenn Sie den Mauszeiger über das Kind bewegen, ändert sich die Hintergrundfarbe des Geschwisterkindes, wodurch der Hintergrund des Elternteils effektiv ausgeblendet wird.

Das obige ist der detaillierte Inhalt vonWie deaktiviere ich den Hover-Effekt für das übergeordnete Element, wenn ich in CSS mit der Maus über das untergeordnete Element fahre?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Heiße KI -Werkzeuge

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

PHP-Tutorial
1517
276
Was sind gemeinsame Inkonsistenzen von CSS -Browser? Was sind gemeinsame Inkonsistenzen von CSS -Browser? Jul 26, 2025 am 07:04 AM

Verschiedene Browser weisen Unterschiede in der CSS -Analyse auf, was zu inkonsistenten Anzeigeeffekten führt, hauptsächlich die Differenzentscheidung, die Berechnung des Boxmodells, die Flexbox- und Raster -Layout -Unterstützung und das inkonsistente Verhalten bestimmter CSS -Attribute. 1. Die Standardstilverarbeitung ist inkonsistent. Die Lösung besteht darin, CSSReset oder Normalize.css zu verwenden, um den anfänglichen Stil zu vereinen. 2. Die Box -Modellberechnung der alten Version von IE ist unterschiedlich. Es wird empfohlen, eine einheitliche Boxgröße: Border-Box zu verwenden. 3. Flexbox und Grid führen in Kantenfällen oder in alten Versionen unterschiedlich ab. Weitere Tests und verwenden Sie Autoprefixer; 4. Einige CSS -Attributverhalten sind inkonsistent. Caniuse muss konsultiert und herabgestuft werden.

Was ist die Akzentfarbe? Was ist die Akzentfarbe? Jul 26, 2025 am 09:25 AM

Accent-Color ist ein Attribut, das in CSS verwendet wird, um die Highlight-Farben von Formularelementen wie Kontrollkästchen, Optionsfeldern und Schieberegler anzupassen. 1. Es ändert direkt die Standardfarbe des ausgewählten Status des Formularsteuerers, z. 2. Die unterstützten Elemente umfassen Eingangskästchen von Typ = "Kontrollkästchen", type = "radio" und type = "range"; 3. Die Verwendung von Akzentfarben kann komplexe benutzerdefinierte Stile und zusätzliche DOM-Strukturen vermeiden und die native Zugänglichkeit aufrechterhalten. 4. Es wird im Allgemeinen von modernen Browsern unterstützt, und alte Browser müssen herabgestuft werden. 5. Setzen Sie Accent-Col

Wie wirkt sich der Browser -Standard -Stylesheet auf das Rendering aus? Wie wirkt sich der Browser -Standard -Stylesheet auf das Rendering aus? Jul 19, 2025 am 02:08 AM

Browser-Standardstile gewährleisten die grundlegende Lesbarkeit, indem Sie automatisch Margen, Füllungen, Schriftarten und Formelementstile anwenden, aber inkonsistente Cross-Browser-Layouts verursachen. 1. Der Standardrand und das Füllen ändern den Layoutfluss, wie den Abstand von Titeln, Absätzen und Listen; 2. Die Standard -Schrifteinstellungen wirken sich auf die Lesbarkeit aus, z. B. 16px -Schriftgröße und TimesNewroman -Schriftart; 3. Die Formelemente sind in verschiedenen Browsern sehr unterschiedlich, daher muss das Erscheinungsbild zurückgesetzt werden. 4. Einige Tags wie stark und sie haben Standard -Schwerpunkte und müssen explizit überschrieben werden. Zu den Workarounds gehört die Verwendung von Normalize.css, Zurücksetzen von Stilen oder global klaren Rändern und Füllungen, während Sie Schriftarten und Formestile für Konsistenz anpassen.

Wie stylen Sie den ersten Brief oder die erste Zeile eines Absatzes? Wie stylen Sie den ersten Brief oder die erste Zeile eines Absatzes? Jul 19, 2025 am 02:58 AM

Um den Beginn eines Absatzes zur Verbesserung der visuellen Anziehungskraft zu verschönern, besteht eine gängige Praxis darin, Pseudoelemente von CSS zu verwenden oder das Dokument manuell zu stylen. In der Webentwicklung kann P :: Erste Buchstabe verwendet werden, um den ersten Buchstabenstil wie Vergrößerung, Fettdruck und Verfärbung festzulegen, aber es sollte beachtet werden, dass es nur für Elemente auf Blockebene geeignet ist. Wenn Sie die gesamte erste Zeile hervorheben möchten, verwenden Sie P :: First-Line, um Stile hinzuzufügen. In Dokumentsoftware wie Word können Sie das erste Buchstabenformat manuell anpassen oder Stilvorlagen erstellen, und InDesign verfügt über eine integrierte "Erstverkt" -Funktion, die für Veröffentlichungen und Design geeignet ist. Bei der Bewerbung müssen Sie auf Details achten, z. B. das Vermeiden komplexer Stile, die das Lesen beeinflussen und die Kompatibilität und Formatkonsistenz sicherstellen.

Beschreiben Sie die Eigenschaft 'vertikaler Align' und ihre typischen Anwendungsfälle Beschreiben Sie die Eigenschaft 'vertikaler Align' und ihre typischen Anwendungsfälle Jul 26, 2025 am 07:35 AM

Thevertical-AlignPropertyincSalignSinlineTable-zellelementevertisch.1.itadjustselements LikeImagesorformInputswitintextLinesusingValues-ähnlich, Middle, Super und Sub.2.IntableCells, ItcontrolscontentalInmentWithtop, Middle, Orbottomvalues, oftes

Beschreiben Sie die CSS-Eigenschaften 'Counter-Resiet' und 'Counter-Increment' Beschreiben Sie die CSS-Eigenschaften 'Counter-Resiet' und 'Counter-Increment' Jul 18, 2025 am 04:00 AM

CSS-Gegenaufnahme und Gegeninkrement werden zur automatischen Anzahl von HTML-Elementen verwendet. 1. Verwenden Sie das Gegenauflagen, um den Zähler zu initialisieren oder zurückzusetzen. 2. Inkrementieren Sie den Zähler durch Gegeninkrement, wie z. B. H3 {Gegeninkrement: Unterabschnitt;}, um jede H3-Titelnummer zu erhöhen; 3. Verwenden Sie das Inhaltsattribut, um Pseudoelemente zu kombinieren, um den Zähler anzuzeigen, wie z. B. H3 :: vor {Inhalt:

Wie kann man ungenutzte CSS reinigen? Wie kann man ungenutzte CSS reinigen? Jul 27, 2025 am 02:47 AM

UseAtOMatedTools -LikepurgecsSoruncsStoscanandremoveUnusedCss; 2.IntegratepurgingIntoyourbuildProcessviawebpack, vite, ortailwind ’ScontentConfiguration; 3.AuditcsSuSageWithCromedevtoolSCoveragetabbeFeforenpurgingToAvoidReperingNeedstyles; 4. Safelistdynamic

Wie ändere ich die Textfarbe in CSS? Wie ändere ich die Textfarbe in CSS? Jul 27, 2025 am 04:25 AM

Um die Textfarbe in CSS zu ändern, müssen Sie das Farbattribut verwenden. 1. Verwenden Sie das Farbattribut, um die Textvorderfarbe des Textes zu setzen und Farbnamen (z. B. rot), Hexadezimalcodes (wie #ff0000), RGB -Werte (wie RGB (255,0,0)), HSL -Werte (wie HSL (0,100%) und RGBA oder HSLA (0,100%) und RGBA oder HSLA mit Transparen (0,100%) und RGBA oder HSLA (0,100%) (255,0,0,0,0,0,0,0,0,0,0). 2. Sie können Farben auf jedes Element anwenden, das Text enthält, wie z. B. H1 auf H6 -Titel, Absatz P, Link A (beachten Sie die Farbeinstellungen verschiedener Zustände von A: Link, A: Besucht, a: hover, a: aktiv), Schaltflächen, Div, Span usw.; 3.. Die meisten

See all articles