Question

我试图找到一种方法：

我的图片里面有文字

<figure>
    <img src="" alt="">
    <caption><span class="text">TEXT</span></caption>
</figure>

<figure>
    <img src="" alt="">
    <caption><span class="text">TEXT 2</span></caption>
</figure>


<div id="showhere"></div>

当我悬停图像以在另一个div中显示其文本时，我需要; <div id="showhere"></div>当鼠标移出时隐藏文字。

我已经尝试过了like this，但我对jQuery不是很了解，只是开始学习它。有人可以帮帮我吗？

这里是fiddle

Answer 1

这应该有效

$("img").hover(function(){  //Cursor in handler
    $('#showhere').text(
        $(this).next('caption').find('.text').text()
    );
}, function(){              //Cursor out handler
    $('#showhere').text('');
});

Answer 2

试

$("figure").hover(function() {
   var data=$(this).find(".text").html();
    $("#showhere").hide().stop().html(data).fadeIn();

}, function() {
    $("#showhere").fadeOut();
});

FIDDLE DEMO

Answer 3

这个怎么样？

$("figure").hover(function() {
    $("#showhere").text($(this).find(".text").text());
}, function() {
    $(this).find(".text").fadeOut();
});

Answer 4

这也应该这样做：

$(document).ready(function(){
    $("img").hover(
       function () {
      $("#showhere").html( $(this).attr("alt") );
       }, 
       function () {
          ("#showhere").html("");
       }
    );
 });

使用alt属性可以获得更清晰的代码： http://jsfiddle.net/dH9yb/

在Img Hover上显示另一个div中的文本

4 个答案:

FIDDLE DEMO