php - 如何根据项目在鼠标悬停时创建弹出窗口？

Question

我想根据项目创建一个弹出窗口。根据每个项目，要出现的文本是从数据库中获取的。具体来说，我有这个代码：

{foreach $images as $item}
        <div class="icoana" id="container">
                    <a href="{base_url()}assets/image/{$item->code}/{$item->name}" class="fancybox" rel="gallery" title="{$item->title}"><img  class="icoane" src="{base_url()}assets/image/{$item->code}/{$item->name}"></a>

                    <div class="detalii">
                        <table style="font-size: 25px">
                           <tr><td>Nume:</td><td>{$item->title}</td> </tr>
                           <tr><td>Lungime:</td><td>{$item->width}&nbsp cm</td> </tr> 
                           <tr><td>Latime:</td><td>{$item->height}&nbsp cm</td></tr>
                        </table>   
                    </div>

                    <div class="despre" id="popup"><img src="{base_url()}assets/image/go.jpg" style="weight: 20px; height:20px;" >Mai  multe...</div>

        </div>
{/foreach}

当鼠标悬停时，div class="despre"我希望出现一个弹出窗口，其中包含存储在{$item->description}. 我想看起来像这样的弹出窗口：http ://creativeindividual.co.uk/2011/02/create-a-pop-up-div-in-jquery/。我想要一个示例或来源的链接代码。

Answer 1

从广义上讲，您需要做的是两个步骤

1) 打印出 php 代码中的 div 描述，紧挨着提到的 div 下方。

所以你的代码变成了。

{foreach $images as $item}
        <div class="icoana" id="container">
                    <a href="{base_url()}assets/image/{$item->code}/{$item->name}" class="fancybox" rel="gallery" title="{$item->title}"><img  class="icoane" src="{base_url()}assets/image/{$item->code}/{$item->name}"></a>

                    <div class="detalii">
                        <table style="font-size: 25px">
                           <tr><td>Nume:</td><td>{$item->title}</td> </tr>
                           <tr><td>Lungime:</td><td>{$item->width}&nbsp cm</td> </tr> 
                           <tr><td>Latime:</td><td>{$item->height}&nbsp cm</td></tr>
                        </table>   
                    </div>

                    <div class="despre" id="popup"><img src="{base_url()}assets/image/go.jpg" style="weight: 20px; height:20px;" >Mai  multe...</div>
                    <div class="desc" style="display:hidden">
                          {$item->description} 
                     </div>
        </div>
        {/foreach}

2）之后使用您在上面提供的链接中的相同代码并修改显示部分

$(function() {

        $('.despre').hover(function(e) {
           //Code to show the popup
           // Modify to use any standard popup library
           // The code below , for now display the desc only.
           $(this).next().show();

        }, function() {
          $(this).next().hide();
        });

      });

现在这将显示和隐藏 div。您可以使用任何 ToolTip 库来实际显示弹出窗口

这里的例子：http ://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

问候

施瑞亚斯 N