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>

isotope-item よりも高くなるように、css で以下も変更しました。

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

非表示の太字のスパンは、ホバリング時に表示する必要があります。

私のサイトの URL は www.painlink.org/staging です

これで私を助けてくれませんか。

乾杯、ニーティ

4

1 に答える 1

0

私は同様のことを書き、サイトhttp://www.maxmedia.comのスクリプトを使用しました。達成するのはそれほど簡単ではありません。maxmediaからjavascriptを分解してみることができます。彼らは圧縮されたJavaScriptを使用していたので、優れたエディターが必要です。また、タイルからマウスアウトし、別のタイルの上にマウスをすばやく重ねると、マウスイベントが機能しない場合があるように見えるという問題もあります。次に、イベントをコントローラーに登録する必要があります。隠れたスパンについては、ここでは問題はありませんが、animateを使用して解決する必要があると思います。スパンを再表示し、画像とスパンを同時にスクロールして、タイルを拡大したくないときにスパンが完全に表示され、画像が非表示になるようにする必要があります。

于 2012-10-29T18:20:30.737 に答える