Question

我的数据库中有一个“发布”行，其中存储了所有发布的帖子。每个帖子都包含ID，图片，标题，说明。我使用while循环将其检索到主页面，我想在每个图像上创建一个悬停效果，根据其id显示相应的信息（标题和描述）。

我用jquery尝试了一些东西，但似乎没有去任何地方。

html上显示的数据库行的基本版本：

<img src="http://www.extremetech.com/wp-content/uploads/2012/12/VWXL1-1024-640x426.jpg" class="post" id="1">
<div class="ad_fade" id="fade1"></div>    

<img src="http://www.hdwallpaperscool.com/wp-content/uploads/2013/11/peter-pan-cars-sports-car-hd-wallppers-cool-desktop-images.jpg" class="post" id="2">
<div class="ad_fade" id="fade2"></div>         

<img src="http://www.hdwallpapers.in/walls/corvette_mallett_concept_car-HD.jpg" class="post" id="3">
<div class="ad_fade" id="fade3"></div>

在php代码中，每个img标签都有一个id设置如下：id =“'。$ id。'”其中$ id是从数据库返回的唯一ID

样式：

.post{
    width:100px;
    height:100px;
}
.ad_fade{
    display:none;
    position:absolute;
    margin:-105px 0 0;
    width:100px;
    height:100px;
    background:rgba(255,255,255,0.8);
}

http://jsfiddle.net/g45db/

我正在尝试创建类似的效果：http://dribbble.com/ 它必须以动态方式悬停该特定图像的相关信息。

感谢所有帮助！

Answer 1

试试吧，

$(function(){
    $('img.post').hover(function(){
        $(this).next('div').show().html(this.src);
         // you can use ajax to get data from database
    });
});

Live Demo

已更新尝试在mouseleave上使用div.ad_fade

$(function () {
    $('img.post').hover(function () {
        $(this).next('div').show().html($(this).data('title')); // using title here
        // you can use ajax to get data from database
    });
    $('div.ad_fade').on('mouseleave',function(){ // mouse leave for fadeout div
        $(this).fadeOut(1000).html('');
    });
});

Updated Demo

Answer 2

你需要容器来保存img悬停时的标题和描述，创建为两个独立的div

尝试将信息存储在img标签中作为数据标题和数据描述，然后将onmouse应用于jquery的功能以显示悬停效果

$('img').onmouseover(function(){
var $this = $(this);
var title = $this.data('title');
// try to append title and description in previously created divs
});

Answer 3

显示标题和说明的最简单方法，使用img标签的title属性，如下所示

<img src="http://www.extremetech.com/wp-content/uploads/2012/12/VWXL1-1024-640x426.jpg" class="post" id="1" title="Title and Description">

如果你想使用jquery，那么使用下面的代码。首先为各个图像填充标题和描述。

<img src="http://www.extremetech.com/wp-content/uploads/2012/12/VWXL1-1024-640x426.jpg" class="post" id="1">
<div class="ad_fade" id="fade1">Title and Description details</div> 

  $('img').mouseenter(function(){
    $(this).next('.ad_fade').show();
  });

  $('.ad_fade').mouseleave(function(){
    $(this).hide();
  });

JQuery根据ID悬停数据库中图像的相关信息

3 个答案: