Bild anzeigen, wenn der Cursor schwebt über Text

Question

Ich versuche, Anzeige ein Bild, wenn der Cursor schwebt über Text, basierend auf meiner Suche habe ich das Beispiel Dribble nur in der Lage gewesen zu finden: "shows text when the cursor hovers over an image" .
Gibt es eine Möglichkeit, den umgekehrten Weg zu finden, zeigt Bild, wenn der Cursor über Text schwebt?

Zum Beispiel möchte ich ein Bild zeigen, wenn der Cursor über den Text unten ist.

Answer 1

Wenn Bild und Text in demselben Behälter sind, dann können Sie es mit nur CSS tun:

.container img { 
opacity: 0; 
} 
.container:hover img { 
opacity: 1; 
} 

Wenn sie in verschiedenen Containern sind, wird Ihnen jQuery helfen:

$('.text').hover(function(){ 
$('.image').css('opacity', '1'); 
}, function(){ 
    $('.image').css('opacity', '0'); 
}); 

https://jsfiddle.net/4k9okj14/

Answer 2

machen den Text in Ankertag

<a href="#">Your Text</a> 

css:

a:hover{ 
    /* write your img path or logic etc here */ 
} 

Answer 3

Mit CSS:

a>div { display: none; } 
 
a:hover>div { display: block; }

<a>Caption 1 
 
<div><img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" /></div> 
 
</a> 
 
<br /> 
 
<a>Caption 2 
 
<div><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqgYUgfs11x4RdvBusUV5MOVW6ArdCgCWIzaBwRaEZA2IxP6LqxyNNQA" /></div> 
 
</a> 
 
<br /> 
 
<a>Caption 3 
 
<div><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSAkk7AAsOvTw7rNLOdclqar_P8nipSY6iN87Okajo_JzZC9-Ft6j2njQ" /></div> 
 
</a> 
 
<br />

Answer 4

Sie können versuchen:

http://jsfiddle.net/KumcX/1899/

$('p').mouseenter(function(){ 
    $('img').fadeIn(); 
}).mouseleave(function(){ 
    $('img').fadeOut(); 
}); 

Answer 5

HTML:

<ul class="hoverImg"> 
    <li id='img1'>text 1</li> 
    <li id='img2'>text 2</li> 
    <li id='img3'>text 3</li> 
</ul> 
<div id='selected'></div> 

Javascript mit jQuery:

$(document).ready(function(){ 
    $('.hoverImg li').mouseover(function(){ 
    $imgLink = $(this).prop('id'); 
    $('#selected').html('<img src="' + $imgLink + '.gif">'); 
    }); 
}) 

Ansicht jsFiddle: https://jsfiddle.net/3cqpd7hk/1/

Hinweis: Bilder sind nicht vorhanden, ersetzen Sie mit Ihrem eigenen.

Answer 6

Wenn Sie Bild von CSS setzen möchten, dann können Sie dies tun.

<div class="image-hover"><p>Hover the text</p></div> 

und CSS ist,

.image-hover p:hover{ 
    background-image: url(../img/one.jpg); 
    width: 400px; 
    height: 400px; 
} 

.image-hover p{ 
    display: block; 
} 

und wenn Sie Bild von HTML setzen wollen, dann können Sie wie folgt tun.

<div class="image_hover"><a>Hover the text<img src="img/one.jpg"></a></div> 

und CSS ist:

.image_hover p img{ 
    display: none; 
} 

.image_hover p:hover img{ 
    display: block; 
}