悬停时在 div 上添加 div答案

【问题标题】：Add divs on top of an div, when hovering悬停时在 div 上添加 div
【发布时间】：2015-04-05 23:29:13
【问题描述】：

我目前正在尝试这样做，当您将鼠标悬停在一个元素上时，三个 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>";

        }

【问题讨论】：

你希望它的工作方式是什么？
@erkaner 我一悬停，第二张图片顶部的效果就会出现。我还更新了图片，以减少混乱。
就我个人而言，我会使用 jQuery，但也可以只使用 HTML/CSS。 :hover 伪类用途广泛。

标签： jquery hover jquery-hover

【解决方案1】：

这是一个纯 CSS 解决方案，它使用绝对定位和 z-indexes，如果 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;
}

【讨论】：

非常感谢，非常靠谱的解决方案！

【解决方案2】：

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

看来这就是你所需要的。

希望对你有所帮助。

【讨论】：

您需要扩展您的答案，使其包含链接中内容的主要详细信息。没有链接，这不是一个实质性的答案。未来的搜索者会感觉像一个溜溜球，到达这里并在别处弹跳——这可能已经死了，或者可能对他们没有用处。所以你需要这些细节。
好的..我是stackoverflow的新手，下次我会记住你的建议。
您现在可以使用答案下方的编辑链接来改进它。
是的。随着您获得更多回答和查看答案的经验，您可以随时重新审视和改进。特别注意新版本、可能有用的技术等。

【解决方案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;
}

【讨论】：