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/.I想要一个示例或源代码的链接。

Answer 1

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

1）在提到的div下面的php代码中打印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/

此致

Shreyas N

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

1 个答案: