如何使用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;} 

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