So verwenden Sie Hover in CSS
In CSS wird Hover verwendet, um das Element auszuwählen, auf dem der Mauszeiger schwebt. Die Syntax lautet „Label Selector:hover{Stilcode;}“. Verwendung: 1. Ändern Sie den Stil direkt auf dem angehaltenen Element 2. Den Stil der untergeordneten Elemente ändern; 3. Den Stil der benachbarten Elemente ändern;
Es gibt ein Hover-Attribut in CSS, das aktiviert werden kann, wenn die Maus nach oben bewegt wird. Es kann verwendet werden, um einige Funktionen ähnlich wie bei js zu implementieren. Als nächstes werden wir in diesem Artikel die Verwendung des Hover-Attributs im Detail vorstellen. Ich hoffe, dass es für alle hilfreich ist.
[Empfohlene Kurse: CSS-Tutorial]
Definition von Hover
:Hover-Selektor für Wenn Sie das Element auswählen, auf dem der Mauszeiger schwebt, gilt dies für alle Elemente
:hover Der Selektor gilt für alle Elemente
Hover-Verwendung
Verwendung 1: Bewegen Sie die Maus über das Element, um den Elementstil zu ändern
Beispiel: Wenn die Maus über die Schriftart fährt, ändert sich die Schriftfarbe
<style>
h1:hover{
color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
</body>Rendering:
Dies ist die häufigste Verwendung, es ändert nur den Stil
Verwendung 2: Steuern Sie die Stile anderer Blöcke durch Hover
Diese Verwendung kann in die folgenden drei Stile unterteilt werden
(1) Steuern Sie den Stil von Unterelementen
<style>
h1:hover p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网
<p>hover的用法</p>
</h1>Rendering:
(2) Steuern Sie den Stil von Geschwisterelementen
'+' Steuern Sie Geschwisterelemente (Geschwisterelemente)
<style>
h1:hover+p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>hover的用法</p>Rendering :
(3) Steuern Sie den Stil von Elementen in der Nähe
'~' Steuern Sie Elemente in der Nähe
<style>
h1:hover~p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>hover的用法</p>Rendering:
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für alle hilfreich sein.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Hover in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1359
52
CSS-Tipp: Verwenden Sie den Übergang, um den Hover-Status beizubehalten
Sep 27, 2022 pm 02:01 PM
Wie kann der Schwebezustand beibehalten werden? Im folgenden Artikel erfahren Sie, wie Sie den Hover-Status beibehalten, ohne JavaScript zu verwenden. Ich hoffe, er hilft Ihnen weiter!
Erleben Sie einen Flug mit der Haval X1-Kamera
Jan 15, 2024 pm 02:21 PM
Wir können im Internet oft viele wunderbare Top-Down-Videos sehen. Die von Drohnen aufgenommenen Bilder sind jedoch tatsächlich nur begrenzte Kenntnisse über Drohnen Wo ist das Fliegen eingeschränkt? Tatsächlich sind flugfertige „Drohnen“ der aktuelle Mainstream und die Wahl der meisten Menschen ist eher würdig. Heute werde ich Ihnen ein praktisches Erlebnis mit der Harvest Flying Camera X1 geben. Optisch verfügt die Harvest Flying Camera X1 über das erste Faltdesign. Die gesamte Kamera wiegt nur 125 g und ist damit leichter als ein Mobiltelefon. Vier weich gefärbte Blätter und ein Sicherheitsrahmendesign schützen perfekt die Sicherheit beim Schießen. Dyed Leaf verwendet auf innovative Weise ein biobasiertes biologisches Substrat, das hochelastisch, langlebig, sicher und umweltfreundlich ist. Außerdem verfügt es über einen vollständig schützenden Rahmen, um Ihre Hände beim Start und bei der Landung zu schützen.
So entfernen Sie das Hover-Ereignis in CSS
Feb 01, 2023 am 10:06 AM
Methoden zum Entfernen von CSS-Hover-Ereignissen: 1. Durch "$("a").hover(function(){ alarm('mouseover'); }, function(){ Alert('mouseout'); })"-Methode zum Binden des Hover-Ereignisses; 2. Lösen Sie die Bindung des Hover-Ereignisses über die Methode "$('a').off('mouseenter').unbind('mouseleave');". Dürfen.
Warum Hover ein Pseudoelement ist
Oct 09, 2023 pm 05:45 PM
Hover ist kein Pseudoelement, sondern eine Pseudoklasse. Pseudoklassen werden verwendet, um einen bestimmten Zustand oder ein bestimmtes Verhalten eines Elements auszuwählen, während Pseudoelemente verwendet werden, um bestimmten Teilen eines Elements Stile hinzuzufügen. Da :hover zum Auswählen eines bestimmten Zustands eines Elements verwendet wird, anstatt Stile zu einem bestimmten Teil des Elements hinzuzufügen, können Sie die Pseudoklasse :hover verwenden, um den Mouseover-Status eines Elements zu formatieren, und Sie können :hover verwenden Pseudoklasse zum Hinzufügen von Hover-Effekten zu Links. Die Farbe, Hintergrundfarbe usw. des Links können sich ändern, wenn die Maus darüber fährt.
Die Rolle von Hover in HTML
Feb 20, 2024 am 08:58 AM
Die Rolle von Hover in HTML und spezifischen Codebeispielen In der Webentwicklung bedeutet Hover, dass bestimmte Aktionen oder Effekte ausgelöst werden, wenn der Benutzer mit dem Cursor über ein Element fährt. Es wird durch die CSS-Pseudoklasse :hover implementiert. In diesem Artikel stellen wir die Rolle des Hovers und spezifische Codebeispiele vor. Erstens ermöglicht Hover einem Element, seinen Stil zu ändern, wenn der Benutzer mit der Maus darüber fährt. Wenn Sie beispielsweise mit der Maus über eine Schaltfläche fahren, können Sie die Hintergrund- oder Textfarbe der Schaltfläche ändern, um den Benutzer daran zu erinnern, was als Nächstes zu tun ist.
So verwenden Sie Hover in CSS
Feb 23, 2024 pm 12:06 PM
Die Hover-Pseudoklasse in CSS ist ein sehr häufig verwendeter Selektor, der es uns ermöglicht, den Stil eines Elements zu ändern, wenn die Maus darüber fährt. In diesem Artikel wird die Verwendung von Hover vorgestellt und spezifische Codebeispiele bereitgestellt. 1. Grundlegende Verwendung Um Hover zu verwenden, müssen wir zunächst einen Stil für das Element definieren und dann die Pseudoklasse :hover verwenden, um den entsprechenden Stil anzugeben, wenn die Maus darüber schwebt. Zum Beispiel haben wir ein Schaltflächenelement. Wenn die Maus über die Schaltfläche fährt, soll sich die Hintergrundfarbe der Schaltfläche in Rot und die Textfarbe in Weiß ändern.
So verwenden Sie Hover in CSS
Nov 24, 2023 am 10:32 AM
In CSS ist :hover ein Pseudoklassenselektor, der zum Auswählen von Elementen verwendet wird, über denen sich der Mauszeiger befindet. Sie können :hover verwenden, um einige Stiländerungen anzuwenden, wenn der Benutzer mit der Maus über ein Element fährt.
So verwenden Sie die jQuery-Methode hover()
Dec 04, 2023 am 09:56 AM
hover() ist eine häufig verwendete Methode in jQuery. Sie wird verwendet, um zwei Ereignisbehandlungsfunktionen zu binden. Diese beiden Funktionen werden ausgeführt, wenn der Mauszeiger das passende Element betritt und verlässt. Die grundlegende Verwendungsmethode ist „$(selector).hover(inFunction,outFunction);“.
