html javascript hover Bild anzeigen
Möchte ich ein Bild zeigen, wenn ich den Mauszeiger über bestimmten text. So, bascially, ich möchte Anzeige/pop-up ein Bild , wenn ich mich bewege den Mauszeiger über den text.
Ich nicht in der Lage zu finden, eine gute Lösung auf jeden webstites so ich hoffe ich konnte einigen helfen. Ich habe keinen code posten weil ich nicht weiß, wo anfangen, außer diesem :
<style>
p:hover{
//Show image code;
}
</style>
- Es verbirgt das Bild, aber dann hilft es nicht, es nicht zeigen, hier ist mein code <img src = "media/longhorns.jpg" style="visibility:hidden" id = "img1" onmouseover = "zeigen()"> <script type = "text/javascript"> function zeigen() { document.getElementById('img1').Stil.Sichtbarkeit = sichtbar; } sagen Sie mir, wenn ich etwas falsch gemacht habe
- mein Fehler, wrap sichtbar in Anführungszeichen. editieren meine Antwort
Du musst angemeldet sein, um einen Kommentar abzugeben.
Könnten Sie versuchen, versteckt das Bild und dann die Anzeige auf hover:
style.visibility = 'visible' into the
onmouseover` - Attribut des text-tagÜben mein javascript ein wenig wieder schrieb ich eine Lösung, die zeigt Ihr Bild neben dem Mauszeiger beim überfahren eines Elements mit einer speziellen Klasse (ich benutze
class="text-hover-image"
im folgenden Beispiel):Den HTML -
Die zugehörigen Javascript (mit Jquery):
Werfen Sie einen Blick auf diese Geige für das sehen im obigen Beispiel ausgeführt.
Was du zeigst ist CSS, nicht Javascript.
Was ich tun würde ist erzeugen einen container und 2
div
s drin, eine am Anfang sichtbar und eine versteckt. Wenn die Maus die container, ausblenden sichtbar und zeigen Sie das anderen.HTML:
Erste CSS:
Nun, was wir wollen, ist das ausblenden der
.text
und zeigen.image
wenn die Maus die container, so fügen wir zu dem CSS:Beachten Sie, dass habe ich nicht getestet, aber es sollte funktionieren. Dies wird nicht animiert werden, wenn Sie eine nette animation, versuchen Sie es mit Javascript. Ich will nicht über ihn reden, aber jQuery kann helfen Sie mit, dass.
<style></style>
- tags (oder verbunden durch<link />
- tags aus einer anderen Datei), nutzt Javascript<script></script>
- tags.