同位素砌體懸停狀態不起作用

我在我的新網站中使用過同位素，我面臨的問題是當我將單個項目放在一個尺寸較大的div上時應該顯示額外的描述，但它會隱藏或切割由其他divs關閉。我想要達到的目標與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

來源

2012-10-29 Neethi Shetty

你只是錯誤地嵌套你的同位素元素。如果你想在懸停的圖像上顯示內容，你應該使用該邏輯：創建一個div（同位素元素），並在該div內嵌套兩個div;一個與你的圖片，視頻，任何內容，一個與你的內容，文字等將出現在懸停。在你的CSS中，你可以用display：none來隱藏該內容。然後，您可以簡單地顯示（）或動畫（）將內容顯示在圖像頂部。如果你的內容比圖像大，同位素將自動增長元素和重新佈局。示例http://adammunns.com/grid-portfolio/ – Systembolaget

我已經寫了類似的事情，我從網站http://www.maxmedia.com使用的腳本。要完成並不容易。你可以嘗試從maxmedia中解析javascript。他們使用壓縮的JavaScript，所以你需要一個好的編輯器。還有一個問題，當你從一個圖塊和鼠標鼠標滑出另一個圖塊時，它又會一次又一次地看起來鼠標事件有時不起作用。然後，您必須在控制器中註冊事件。關於隱藏的跨度，我在這裏沒有看到問題，但我認爲你需要使用動畫解決它。您必須取消隱藏範圍並同時滾動圖像和範圍，以便跨度完全可見，並且在您不想增長拼塊時隱藏圖像。

來源

2012-10-29 18:20:30 Bytemain

同位素砌體懸停狀態不起作用

回答

相關問題