Question

嗨我想在悬停时对我的div做出这样的效果： website with the effect, hover over the people div's to see

我试图制作一个网格，但我很想将悬停效果放在div之上。

my codepen link, need the hover on the blocks

Answer 1

您可以使用：hover关键字将样式附加到div。

示例，您想要在悬停时更改某些效果：

div:hover {
    background-color: black;
}

您希望在父级悬停

上更改某个孩子的某些效果

div:hover .child {
    background-color: black;
}

修改

好的，当你强行悬停在他们的页面上时检查班级变化，他们的原始元素有这些样式：

z-index: 200; content: ""; height: 263px; width: 102px; background-color: #91c6c2; display: inline-block; position: absolute; top: 0px; right: -50px; -webkit-transform: skew(21deg); transform: skew(21deg); -webkit-backface-visibility: hidden; -webkit-transition: right 0.5s; transition: right 0.5s;

在悬停时，他们只是将元素“右”更改为80px，这使其通过上述过渡浮动，“过渡：正确0.5秒”。

Answer 2

你需要一个容器div和至少一个前景div来覆盖背景（可能只是一个图像）。然后，您将要在悬停时定位父级并更改前景子级。我使用了transform而不是动画一个位置属性，因为它的性能更高。

.card{
  position:relative;
  width:200px;
  height:200px;
  border:1px solid blue;
  overflow:hidden;
}

.card > div{
  height:100%;
  width:100%;
}

.card .foreground{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform:translateX(100%);
  background-color:blue;
  transition:.5s ease;
}

.card:hover .foreground{
  transform:translateX(0);
}

<div class="card">
   <div class="foreground"></div>
   <div class="background"></div>
</div>

Answer 3

你需要在div的悬停上叠加效果。请参阅此link

 <div id="overlay">
    <span id="plus">+</span>
  </div>

CSS

#overlay    {  background:rgba(0,0,0,.75);
               text-align:center;
               padding:45px 0 66px 0;
               opacity:0;
               -webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;}

#box:hover #overlay {
               opacity:1;}

#plus       {  font-family:Helvetica;
               font-weight:900;
               color:rgba(255,255,255,.85);
               font-size:96px;}

在谷歌搜索中找到了这个，而且很多插件都是avila

Answer 4

这可能不是最有效的方法，但绝对是我发现的最简单的方法。您可以选择将绝对位置添加到隐藏的div，使其位于图像顶部！

HTML：

<div id='backgroundImg' onmouseover="hoverOver('show');" onmouseout="hoverOver('hide');">
     <div id='hiddenDiv'> 

     </div>
     <img src='myImage.png'>
</div>

Javascript：

<style>
    function hoverOver(type) {
        if (type=='show') {
            document.getElementById('hiddenDiv').style.display='inherit';
        } else {
            document.getElementById('hiddenDiv').style.display='none';
        }
    }
</style>

如何在div悬停时使用内容悬停？

4 个答案: