在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时，当悬停时

回答

相关问题