Question

我想做这样的事情：http://tympanus.net/Tutorials/3DHoverEffects/ 但我不希望图像被折叠。我希望折叠表中的整个tr。您可以查看weblicanto.com作为示例。

您会在上面找到一个主题和帖子以及一些数字。当有人在tr上方盘旋时，我希望它被折叠并显示统计数据。我不知道如何使用基于上述教程的tr元素来实现这一点，因为教程是关于图像的。

这是我论坛的代码。

    <tr class="">
      <td class="col_c_icon">
        <img src="http://weblicanto.com/public/style_images/weblicanto/f_icon_read.png">
      </td>
      <td class="col_c_forum">
        <h4><a href="http://weblicanto.com/forum/2-news-updates/" title="News &amp; Updates">News &amp; Updates</a>
        </h4>
         <p class="desc __forum_desc ipsType_small">New additions to Weblicanto will be posted here that include but is not limited to; small updates, new features, hosted events and competitions and other types of news. Make sure that you read this forum often so you can be informed of new information.</p>
      </td>
      <td style="width: 7%;"><span class="statsNumber">3</span><span class="statsText">topics</span></td><td style="width: 7%;"><span class="statsNumber">3</span><span class="statsText">replies</span>
      </td>
      <td class="col_c_post">
        <a href="http://weblicanto.com/user/59-vrus/" class="ipsUserPhotoLink left"><img src="http://weblicanto.com/uploads/profile/photo-59.gif?_r=1376011032" alt="Determined - Important! - last post by V!rus" class="ipsUserPhoto ipsUserPhoto_mini"></a>
    <ul class="last_post ipsType_small">
              <li>
                <a href="http://weblicanto.com/topic/1758-determined-important/?view=getnewpost" title="Determined - Important!">Determined - Important!</a>
               </li>
               <li>By <a hovercard-ref="member" hovercard-id="59" data-ipb="noparse" class="url fn name  ___hover___member _hoversetup" href="http://weblicanto.com/user/59-vrus/" title="" id="anonymous_element_21"><span itemprop="name"><span style="color:rgba(255, 77, 77, 1);font-weight: bold;">V!rus</span></span></a></li>
               <li class="desc lighter blend_links"><a href="http://weblicanto.com/topic/1758-determined-important/?view=getlastpost" title="View last post">11 Aug 2013</a></li>
             </ul>
           </td>
         </tr>

没有图像的3D悬停效果

0 个答案: