如何使用div上的内容进行悬停？

Question

您好我想打一个悬停像这样我的DIV一个效果： website with the effect, hover over the people div's to see

我试图做一个网格，但我strugling获得的股利顶部悬停效果。悬停关键字：

my codepen link, need the hover on the blocks

Answer 1

你需要一个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 2

您可以通过使用附加样式核实。

例如，你想改变悬停在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.5s”。

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

在谷歌找到相关，也大量的插件都是阿维拉