Bild Auf Text-Link-Hover-CSS Nur

Habe ich einen text-link. Wenn der Benutzer mit der Maus über den text-link, ich will ein Bild angezeigt werden, die an anderer Stelle auf der Seite. Ich möchte das mit css. Ich dachte, es getan werden könnte, einfach mit einer einzigen Zeile code in der link wie ein onmouseover-aber es scheint, dass Bedarf anderer code an anderer Stelle auf der Seite.

Ich habe versucht, mit dem a:hover mit dem Bild möchte ich zeigen, wie ein hintergrund-Bild, aber ich glaube nicht, dass es manipuliert werden kann, um die Anzeige in full statt abgeschnitten nach unten, um die Größe der text-link.

Sehe ich Hunderte von Ergebnissen, wenn ich versuche zu suchen, aber keiner von Ihnen sind, was ich will. Die nächste Sache, die ich fand, war diese.

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

Aber, dass die Arbeit mit Mauszeiger über thumbnail-Bilder. Ich möchte nur, dass die Benutzer den Mauszeiger über einen text-link ein Bild zeigen, auf der Seite irgendwo anders. Ich fand, dass die Galerie aus diesem thread: Pop-up-Bild css link hover

Ich will nicht befassen sich mit was auch immer, dass jquery ist oder zu viel Skripte, weil ich bin mehr vertraut mit css. Kennt jemand einen einfachen Weg, dies zu tun, oder ist es immer noch kein Weg, auch nicht mit allen änderungen für den Einsatz von css3?

Dank!

InformationsquelleAutor user1418023 | 2012-05-26

  1. 16

    CSS ist nicht in der Lage sein zu nennen, andere Elemente, wie, dass, Sie müssen JavaScript verwenden, zu erreichen über eine Kind-oder Geschwister-Selektor.

    Könnten Sie versuchen, so etwas wie dieses:

    <a>Some Link
<div><img src="/you/image" /></div>
</a>

    dann...

    a>div { display: none; }
a:hover>div { display: block; }
    Ah okay ich sehe was du meinst. Es wäre versteckt, aber die dann angezeigt wird, wenn ich den Mauszeiger über den link, weil Sie verknüpft sind mit der ">". Ich werde versuchen und sehen, was passiert, vielen Dank!
    Genial, ich habe es an die Arbeit! Einzige änderung die ich gemacht hatte, war die Einstellung der hover-div auf inline-seit block machte es eine Verschiebung der links neben ihn, nachdem Sie fertig waren, schweben und dann in der html-Teil gab ich dem div eine Klasse, die ich eine absolute position für das Bild in das div auftauchen würde, wo ich wollte, dass es auf der Seite. Es funktioniert genau wie ich es wollte, ich danke Ihnen so sehr!!!
    Oh, ich auch ausgetauscht,>div a<img gleiche mit hover, so dass ich konnte einfach das Bild ohne den Anker-Tags anstelle der div. Es hat gut funktioniert im Browser, aber die links waren aufgereiht seltsam auf meinem mobilen Gerät. Jetzt sind Sie alle match-up. Nochmals vielen Dank!
    Ich habe versucht, gelten Sie diese Lösung in das style-Attribut von <ul> wie dieser: Stil=" " >div { display: none; }; a:hover>div { display: block; }" und es funktioniert nicht.
    Es funktioniert Super! Vielen Dank!

    InformationsquelleAutor Fluidbyte

  2. 23

    Es getan werden kann, mit CSS allein. Es funktioniert perfekt auf meinem Rechner im Firefox, Chrome und Opera-browser unter Ubuntu 12.04.

    CSS : 

    .hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { display:block; }

    HTML :

    <div class="hover_img">
     <a href="#">Show Image<span><img src="images/01.png" alt="image" height="100" /></span></a>
</div>
    Diese genial und tut GENAU das, was ich will, danke! Aber, ich bin, läuft in ein Problem, wenn es in einer Tabelle, es wird nicht die vollständige Größe des Bildes, weil die Größe der <td> welcher ist nicht definiert, aber ich gehe davon aus, kleiner ist, da der link, der entspricht dem Bild. Haben Sie eine Möglichkeit, um dieses? Gibt es eine Möglichkeit, für das Bild zu "schweben" im wesentlichen oberhalb der Tabelle, und nicht unbedingt in die Tabelle?
    fügen Sie diese Zeilen an .hover_img a:hover span css... height: 200px; width: 200px; overflow: visible; und es zeigt, was @Spartacus38 wollte

    InformationsquelleAutor Naveen Web Solutions

  3. 1

    hinzufügen

    .hover_img a:hover span {
    display: block;
    width: 350px;
}

    zeigen hover-Bild in voller Größe in der Tabelle ändern 350 zu Ihrer Größe.

    InformationsquelleAutor gta6cheats.club

  4. -5

    Es ist nicht möglich, mit CSS allein, benötigen Sie Javascript. 

    <img src="default_image.jpg" id="image" width="100" height="100" alt="" />


<a href="page.html" onmouseover="document.images['image'].src='mouseover.jpg';" onmouseout="document.images['image'].src='default_image.jpg';"/>Text</a>

    InformationsquelleAutor Storm3y

Schreibe einen Kommentar