在div上方添加div時，當懸停時

我目前正在嘗試這樣做，當您將鼠標懸停在某個元素上時，三個div將覆蓋此元素，這是我希望它執行的一個示例。在div上方添加div時，當懸停時

左側不徘徊，右側徘徊。

enter image description here

我意識到，這是不可能的CSS做的，但我相信這可以在jQuery的工作要做，首先我嘗試添加類，但是這是不會工作，我希望它的方式，說到jQuery，我完全失去了。

$(function() { 
$(document).ready(function() { 
    $('.ikon').hover(function() { 
     $(this).addClass('hover'); 
    }, function() { 
     $(this).removeClass('hover'); 
    });

目前CSS誰處理圖片：

/**PORTFOLIO-ALBUM***/ 
/*==================*/ 

#portfolio #album { 
    width: 955px; 
    min-width: 360p; 
    height: 780px; 
    overflow: auto; 
    position: absolute; 
    top: 100px; 
    left: 250px; 
} 

#portfolio .ikon { 
    width: 280px; 
    height: 175px; 
    overflow: hidden; 
    float: left; 
    margin-left: 20px; 
    margin-bottom: 20px; 
    position: relative; 
} 

#portfolio .ikon img { 
    max-width: 350px; 
    min-height: 100%; 
    position: absolute; 
    left: -35px; 
    top: -10px; 

}

如何獲得的圖片輸出：

$query = "SELECT photo_id, photo_filename FROM photos WHERE fk_photo_category_id = '$album_category' "; 
    $result = $mysqli->query($query); 

    if ($result->num_rows > 0) { 

     while ($row = $result->fetch_array(MYSQLI_ASSOC)) { 
     $photo_name = $row['photo_filename']; 
     $photo_id = $row['photo_id']; 

     echo "<div class='ikon'><a href='index.php?page=portfolio.php&album=$album_id&photo=$photo_id'><img src='img/photos/$photo_name' alt='' /></a></div>"; 

     }

來源

2015-04-05 Athax

什麼是你想要的工作方式？ – renakre 2015-04-05 23:34:02

@erkaner只要我懸停，在secound圖片頂部的效果即將出現。我也更新了圖片，以減少混淆。 – Athax 2015-04-05 23:36:52

個人而言，我會用jQuery來做這件事，但也可以用HTML/CSS來完成。 '：hover'僞類是相當通用的。 – 2015-04-05 23:47:38

這是一個純粹的CSS解決方案，它使用絕對定位和z索引，如果CSS不是完全離開表格。

Demo

.initial { 
    background-color: red; 
    height: 100px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100px; 
    z-index: 1; 
} 

.initial:hover { 
    z-index: 0; 
} 

.hover-div-container { 
    height: 100px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100px; 
    z-index: 0; 
} 

.hover-div-container:hover { 
    z-index: 2; 
}

來源

2015-04-05 23:51:44

非常感謝你，一個非常穩固的解決方案！ – Athax 2015-04-06 00:53:22

很高興能幫到你！ – 2015-04-06 01:03:39

看看事件.hover（）綁定一個或兩個處理程序匹配的元素，當鼠標指針進入和離開元素時執行。'。鏈接 - Jquery。

看起來像這樣是你需要的。

希望它可以幫助你。

來源

2015-04-05 23:44:30

您需要擴展您的答案，以便它包含鏈接內容的主要細節。沒有鏈接，這不是一個實質性的答案。未來的搜索者會覺得自己像個溜溜球，到達這裏並在別處反彈 - 這可能已經死了，或者可能對他們沒有用處。所以你需要這些細節。 – 2015-04-06 00:02:36

好的..我是新來的stackoverflow和下一次我會記住你的意見。 – 2015-04-23 17:32:29

您可以使用您的答案下的編輯鏈接來改進它。 – 2015-04-23 17:33:37

你可以利用像這樣的div的z索引。

<div> 
    <div class="some_class"> 
     original div 
    <div> 
    <div class="hover_class" 
     div that shoud appera 
    <div> 
<div> 

Now in Css 
#portfolio .iKon { 
    z-index:1 
} 
#portfolio .iKon:hover { 
    z-index: -1; #it will make the original div go in background 
} 
.hover_class{ 
    z-index:0; 
}

來源

2015-04-05 23:49:12

在div上方添加div時，當懸停時

回答

相關問題