Question

当光标悬停在文字上时，我正在尝试显示图片，根据我的搜索，我只能找到运球的例子： "shows text when the cursor hovers over an image"。
当光标悬停在文本上时，有没有办法找到显示图像的相反方式？

例如，我想在光标位于下方文本上时显示图像。

Answer 1

如果您想从css中放置图像，那么您可以这样做。

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

和css是，

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

.image-hover p{
   display: block;
}

如果您想从HTML中放置图像，那么您可以这样做。

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

和css是：

.image_hover p img{
  display: none;
}

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

Answer 2

以锚标记

制作文字

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

的CSS：

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

Answer 3

如果图像和文本在同一容器中，那么只能使用css：

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

如果它们位于不同的容器中，那么jQuery将帮助您：

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

https://jsfiddle.net/4k9okj14/

Answer 4

使用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 5

您可以尝试：

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

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

Answer 6

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>

使用jQuery的Javascript：

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

查看jsFiddle： https://jsfiddle.net/3cqpd7hk/1/

注意：图片不存在，请替换为您自己的图片。

当光标悬停在文本

6 个答案: