如何根據項目在鼠標懸停上創建彈出窗口？

-1

我想根據項目創建一個彈出窗口。出現在文本從取決於每個item.Specifically數據庫中獲取，我有這樣的代碼：如何根據項目在鼠標懸停上創建彈出窗口？

{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想要鏈接到示例或源代碼。

來源

2013-03-03 globula_alba

從廣義上講，你需要做的是兩個步驟

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(); 
     }); 

     });

現在這將顯示和隱藏股利。你可以使用任何工具提示庫實際顯示彈出

例子在這裏：http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

問候

Shreyasñ

來源

2013-03-03 20:23:01 JustShrey

如何根據項目在鼠標懸停上創建彈出窗口？

回答

相關問題