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>
#wrapper .text { position: relative; bottom: 30px; left: 0px; visibility: hidden; } #wrapper:hover .text { visibility: visible; }
jQuery-Lösung:
<div>
#wrapper p { position: relative; bottom: 30px; left: 0px; visibility: hidden; }
$('.hover').mouseover(function() { $('.text').css("visibility","visible"); }); $('.hover').mouseout(function() { $('.text').css("visibility","hidden"); });
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>
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!