同位素砌体悬停状态不起作用

时间:2012-10-29 17:06:58

标签: php hover z-index jquery-masonry jquery-isotope

我在我的新网站中使用了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

你可以帮我解决这个问题。

干杯, Neethi

1 个答案:

答案 0 :(得分:0)

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