Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie zeige ich Text beim Mouseover eines Bildes ohne JavaScript an?

Barbara Streisand
Freigeben: 2024-11-06 22:56:03
Original
875 Leute haben es durchsucht

How to Display Text on Mouseover of an Image Without JavaScript?

Text beim Mouseover des Bildes anzeigen

Sie möchten ein kleines Feld mit einem Hyperlink in der unteren linken Ecke eines Bildes anzeigen, wenn die Maus schwebt darüber. Um dies ohne Verwendung von JavaScript zu erreichen, stellen wir zwei CSS-Lösungen vor:

CSS3-Lösung:

Verwendung des CSS3-Pseudoelements :hover:

<div>
Nach dem Login kopieren
Nach dem Login kopieren
#wrapper .text {
    position: relative;
    bottom: 30px;
    left: 0px;
    visibility: hidden;
}

#wrapper:hover .text {
    visibility: visible;
}
Nach dem Login kopieren

jQuery-Lösung:

<div>
Nach dem Login kopieren
Nach dem Login kopieren
#wrapper p {
    position: relative;
    bottom: 30px;
    left: 0px;
    visibility: hidden;
}
Nach dem Login kopieren
$('.hover').mouseover(function() {
    $('.text').css("visibility","visible");
});

$('.hover').mouseout(function() {
    $('.text').css("visibility","hidden");
});
Nach dem Login kopieren

Denken Sie daran, die jQuery-Bibliothek in den HTML-Kopf aufzunehmen:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie zeige ich Text beim Mouseover eines Bildes ohne JavaScript an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!