悬停时在 div 之上添加 divs

Question

我目前正在尝试这样做，当您将鼠标悬停在一个元素上时，三个 div 将覆盖该元素这是我想要它做的一个例子。

左侧未悬停，右侧悬停。

我意识到这在 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>";

        }

Answer 1

看看事件 .hover() 它将一个或两个处理程序绑定到匹配的元素，当鼠标指针进入和离开元素时执行。'。 Link - Jquery。

看来这就是你需要的。

希望对您有所帮助。

Answer 2

您可以像这样利用 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;
}

Answer 3

如果 CSS 没有完全偏离 table，这里是使用绝对定位和 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;
}

悬停时在 div 之上添加 divs

Add divs on top of an div, when hovering

jquery

hover

jquery-hover