1

我在我的新站点中使用了 Isotope，我面临的问题是，当我将单个项目悬停时，应该显示一个更大的 div，提供额外的描述，但它被其他 div 隐藏或切断。我想要实现的类似于 www.ted.com 网站。

这是我的网格的 html 部分，它从数据库中提取单个摘要

<div id="container" class="clearfix">

    <?php

    $sql="SELECT * FROM abstracts where year='2012' AND status='publish' order by date_added desc LIMIT 0, 15";

    $sql_query = mysql_query($sql);
    while($row=mysql_fetch_assoc($sql_query))

    {

    ?>
            <a href="http://www.painlink.org/staging/login.php"> 

            <div class="category <?php echo $specialities;?>" data-symbol="Hg" data-category="basicscience">
            <div class="Border">
                <img src="cropper.php?src=admin/images/journals/<?php echo $row['journal_image'];?>&h=180&w=120&zc=1">
                **<span><div id="filterLink_text"><?php echo $row['title']; ?></div></span>**
            </div>
            </div></a>

        <?php 
    }
    ?>
</div>

我还在css中更改了以下内容，使其高于同位素项目

.isotope-item:hover { 
    z-index: 10; 
}

隐藏的粗体跨度必须在悬停时显示。

我的网站网址是 www.painlink.org/staging

你能帮我解决这个问题吗？

干杯，内蒂

4

1 回答 1

0

我写了一个类似的东西，我使用了来自网站http://www.maxmedia.com的脚本。实现起来并不容易。您可以尝试从 maxmedia 中分解 javascript。他们使用压缩的 javascript，所以你需要一个好的编辑器。当您一次又一次地将鼠标从一个瓷砖上移出并快速将鼠标悬停在另一个瓷砖上时，也会出现问题，似乎鼠标事件有时不起作用。然后，您必须在控制器中注册事件。关于隐藏跨度，我在这里没有看到问题，但我认为您需要使用 animate 来解决它。您必须取消隐藏跨度并同时滚动图像和跨度，以便跨度完全可见，并且当您不想增大图块时隐藏图像。

于 2012-10-29T18:20:30.737 回答