Javascript 悬停图像时显示说明

我有这个HTML：

<div class="left_area">
 <div class="caption"> 
   <a href="<?php echo $URL; ?>"><img src="<?php echo $images; ?>" alt="<?php echo $name; ?>" /></a>
   <span>test</span></div>
</div>

测试

当我用鼠标浏览图像时，我想在该范围内显示我想要的任何内容，甚至是but按钮或粗体文本的图像。像这样的

提前谢谢

您可以在CSS中执行此操作

HTML 演示-

您可以在CSS中执行此操作

HTML

---

演示-

试试这样的东西-

CSS

。标题{
位置：相对位置；
宽度：300px；
光标：指针；
}
跨度{
显示：无；
位置：绝对位置；
左：0；
排名：0；
背景：rgba（0,0,0,7）；
高度：200px；
宽度：300px；
颜色：#fff；
}

JS

---

试试这样的东西-

CSS

。标题{
位置：相对位置；
宽度：300px；
光标：指针；
}
跨度{
显示：无；
位置：绝对位置；
左：0；
排名：0；
背景：rgba（0,0,0,7）；
高度：200px；
宽度：300px；
颜色：#fff；
}

JS

试试这个

$(document).ready(function(){
  $('a','.caption').mouseenter(function(){
     $('span',$(this).parent()).show();
  }).mouseleave(function(){
     $('span',$(this).parent()).hide();
  });

}))；​

参考

试试这个

$(document).ready(function(){
  $('a','.caption').mouseenter(function(){
     $('span',$(this).parent()).show();
  }).mouseleave(function(){
     $('span',$(this).parent()).hide();
  });

}))；​

参考

试试这个：

$('ul li').mouseenter(function(){
    var image= $(this).find('img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.fadeIn();
}).mouseleave(function(){
     var image= $(this).find('img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.fadeOut();
});​

试试这个：

$('ul li').mouseenter(function(){
    var image= $(this).find('img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.fadeIn();
}).mouseleave(function(){
     var image= $(this).find('img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.fadeOut();
});​

---

是的，像这样，但是想要文本出现在图像上，可以吗？是的，它在jsfidlle中工作，但我不明白为什么不显示给我，我想它隐藏在图像后面，它在文本上制作标题，而不是在所有图像上，背景是文本而不是图像没有人能给你你想要的确切代码，因为只有你知道你需要什么作为结果。这只是一个粗略的工作思路，你可以根据自己的需要对其进行构建和修改，就像这样，但你希望文本出现在图像上，可以吗？是的，它在jsfidlle中工作，但我不明白为什么没有为我显示，我想它隐藏在图像后面，它在文本上制作标题，而不是在所有图像上，背景是文本而不是图像没有人能给你你想要的确切代码，因为只有你知道你需要什么作为结果。这只是一个粗略的想法，你可以根据自己的需要加以改进。我看不出有什么效果jsfiddle@Jimmy当前位置他的图像似乎没有从imgur中提取。但是如果您将鼠标悬停在损坏的图像图标上，它应该被一个带有

元素文本的黑框替换。@Jimmy-打开此图像一次，然后打开小提琴。Imgur在jsfiddleyes，correct，is working，我如何处理文本“与图片相关的一些信息”我需要它显示在底部可能，我的意思是我如何控制它？可以使用.image.caption的顶部、左侧、右侧和底部CSS属性设置位置，虽然文本可以直接在HTML中编辑，但我在中看不到任何结果jsfiddle@Jimmy当前位置他的图像似乎没有从imgur中提取。但是如果您将鼠标悬停在损坏的图像图标上，它应该被一个带有

元素文本的黑框替换。@Jimmy-打开此图像一次，然后打开小提琴。Imgur在jsfiddleyes，correct，is working，我如何处理文本“与图片相关的一些信息”我需要它显示在底部可能，我的意思是我如何控制它？可以使用.image.caption的顶部、左侧、右侧和底部CSS属性设置位置，而文本可以直接在HTML中编辑

$('ul li').mouseenter(function(){
    var image= $(this).find('img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.fadeIn();
}).mouseleave(function(){
     var image= $(this).find('img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.fadeOut();
});​