在悬停时在div上添加div

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（）它将一个或两个处理程序绑定到匹配的元素，当鼠标指针进入和离开元素时执行。＆＃39;。链接 - Jquery。

似乎这就是你所需要的。

希望它对你有所帮助。

Answer 2

如果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;
}

Answer 3

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