Heim > Artikel > Web-Frontend > Wie verwende ich CSS, um ein anderes Bild abzudecken, wenn die Maus hinein- und herausbewegt wird? (Beispiel)

Wie verwende ich CSS, um ein anderes Bild abzudecken, wenn die Maus hinein- und herausbewegt wird? (Beispiel)

藏色散人Original: 2018-08-10 10:30:546226Durchsuche

Wenn wir beim Entwerfen einer Website auf die Anforderung stoßen, dass die Maus beim Hinein- und Herausbewegen in ein bestimmtes Bild automatisch ein anderes Bild verdecken soll? Tatsächlich wissen Freunde, die sich ein wenig mit CSS-Code auskennen, dass dies ein sehr einfacher Vorgang ist. Selbst ein Anfänger kann die Wissenspunkte durch die Einführung in diesem Artikel leicht verstehen. Deshalb werde ich Ihnen heute eine detaillierte Einführung in die Spezialeffektfunktion zum Abdecken eines bestimmten Bildes im CSS-Mauspass-Stil geben.

CSS-Mausbewegung hinein und heraus, um ein anderes bildspezifisches Codebeispiel abzudecken:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css鼠标经过样式测试</title>
</head>
<body>
<div class="div">
    <div class="img1 img">
        <img  src="1.png" alt="Wie verwende ich CSS, um ein anderes Bild abzudecken, wenn die Maus hinein- und herausbewegt wird? (Beispiel)" >
    </div>
    <div class="img2 img">
        <img  src="2.png" alt="Wie verwende ich CSS, um ein anderes Bild abzudecken, wenn die Maus hinein- und herausbewegt wird? (Beispiel)" >
    </div>
</div>
<style>
    .div{position:relative; width:800px; margin:auto;}
    .img{position:absolute; z-index:0;}
    .img2{left:150px; top:100px;}
    .img1:hover{z-index:1;}
</style>
</body>
</html>

Der obige Effekt ist wie folgt:

1 Die gerade geöffnete Seite zeigt Folgendes an:

Wie verwende ich CSS, um ein anderes Bild abzudecken, wenn die Maus hinein- und herausbewegt wird? (Beispiel)

2. Wenn die CSS-Maus in die Anzeige bewegt wird, verdeckt sie ein anderes:

Wie verwende ich CSS, um ein anderes Bild abzudecken, wenn die Maus hinein- und herausbewegt wird? (Beispiel)

Tatsächlich liegt der Schlüssel zu diesem Artikel in der Verwendung der Hover-Pseudoklasse. Hier gebe ich Ihnen auch eine kurze Einführung in die Definition und Verwendung von css:hover. Die Pseudoklasse

:hover fügt diesem Element spezielle Stile hinzu, wenn die Maus darüber bewegt wird. Diese Pseudoklasse wendet Elemente an, die sich in einem „Hover-Zustand“ befinden. Hover ist definiert als wenn der Benutzer ein Element anzeigt, es aber nicht aktiviert. Das häufigste Beispiel hierfür ist das Bewegen des Mauszeigers innerhalb der Grenzen eines Hyperlinks in einem HTML-Dokument. Theoretisch könnten andere Elemente mit der Maus bewegt werden, aber CSS definiert nicht, welche.

Hinweis: Alle gängigen Browser unterstützen die Pseudoklasse :hover.

Ich hoffe, dass dieser Artikel Freunden in Not hilfreich sein wird!

Das obige ist der detaillierte Inhalt vonWie verwende ich CSS, um ein anderes Bild abzudecken, wenn die Maus hinein- und herausbewegt wird? (Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Was ist CSS-Übergang? Eine kurze Einführung in Übergangselemente in CSSNächster Artikel：Was ist CSS-Übergang? Eine kurze Einführung in Übergangselemente in CSS

In Verbindung stehende Artikel

Mehr sehen