html/css：更改動畫flexbox-element的內容懸停

我有一排四個框，裏面有大的單個字母，它們使用flexbox來設置跨越頁面的整個寬度。懸停時，盒子稍微旋轉。html/css：更改動畫flexbox-element的內容懸停

我希望盒子的內容也可以在懸停時更改，也就是說，我希望background-color在懸停在相應框上時變爲黑色，並在框內顯示paragraph較小的文本。我無法想出這樣做。首先，我想通過設置display: none來「隱藏」具有所需更改外觀的盒子，然後在用戶將白盒子懸停後將其更改爲inline。然而，我不能設法妥善隱藏一個盒子，因爲它與flexbox混淆，而且這個盒子也不會像白色盒子那樣正確旋轉。

任何想法，我可以如何實現不斷變化的內容和懸停白盒的外觀？這裏的箱子的當前設置的的jsfiddle：

* { 
 
    margin: 0; 
 
    padding: 1px; 
 
    box-sizing: border-box; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
} 
 

 
.row { 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 

 
.banner { 
 
    margin: 0px; 
 
    padding: 0; 
 
    font-size: 13rem; 
 
    line-height: 1.2; 
 
} 
 

 
.box { 
 
    flex: 1; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    background-color: white; 
 
    box-sizing: border-box; 
 
    cursor: default; 
 
} 
 

 
.rotate-right { 
 
    transition: all 400ms ease; 
 
} 
 

 
.rotate-left { 
 
    transition: all 400ms ease; 
 
} 
 

 
.rotate-right:hover { 
 
    transform: rotate(5deg); 
 
} 
 

 
.rotate-left:hover { 
 
    transform: rotate(-5deg); 
 
}

<!-- BANNER/TILES ON TOP OF PAGE --> 
 

 
<div class="top" id="top"> 
 
    <div> 
 

 
    <div class="flex row banner"> 
 
     <div class="box rotate-right" id="box1"> 
 
     <p> 
 
      1 
 
     </p> 
 
     </div> 
 

 

 
     <div class="box rotate-left"> 
 
     <p> 
 
      2 
 
     </p> 
 
     </div> 
 

 
     <div class="box rotate-right"> 
 
     <p> 
 
      3 
 
     </p> 
 
     </div> 
 

 
     <div class="box rotate-left"> 
 
     <p> 
 
      4 
 
     </p> 
 
     </div> 
 
    </div> 
 

 

 
    </div> 
 
</div>

來源

2017-07-25 JoSch

這是你需要什麼？演示是在箱1

* { 
 
    margin: 0; 
 
    padding: 1px; 
 
    box-sizing: border-box; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
} 
 

 
.row { 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 

 
.banner { 
 
    margin: 0px; 
 
    padding: 0; 
 
    font-size: 13rem; 
 
    line-height: 1.2; 
 
} 
 

 
.box { 
 
    flex: 1; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    background-color: white; 
 
    box-sizing: border-box; 
 
    cursor: default; 
 
} 
 

 
.rotate-right { 
 
    transition: all 400ms ease; 
 
} 
 

 
.rotate-left { 
 
    transition: all 400ms ease; 
 
} 
 

 
.rotate-right:hover { 
 
    transform: rotate(5deg); 
 
    background: black; 
 
} 
 

 
.rotate-left:hover { 
 
    transform: rotate(-5deg); 
 
    background: black; 
 
} 
 

 
.text { 
 
    color: white; 
 
    display: none; 
 
    font-size: 4rem; 
 
} 
 

 
.rotate-right:hover p.text, 
 
.rotate-left:hover p.text { 
 
    display: inline-block; 
 
} 
 

 

 
.rotate-right:hover p:not([class="text"]), 
 
.rotate-left:hover p:not([class="text"]) { 
 
    display: none; 
 
}

<!-- BANNER/TILES ON TOP OF PAGE --> 
 

 
<div class="top" id="top"> 
 
    <div> 
 

 
    <div class="flex row banner"> 
 
     <div class="box rotate-right" id="box1"> 
 
     <p> 
 
      1 
 
     </p> 
 
     <p class="text">Text</p> 
 
     </div> 
 

 

 
     <div class="box rotate-left"> 
 
     <p> 
 
      2 
 
     </p> 
 
     <p class="text">Text</p> 
 
     </div> 
 

 
     <div class="box rotate-right"> 
 
     <p> 
 
      3 
 
     </p> 
 
     <p class="text">Text</p> 
 
     </div> 
 

 
     <div class="box rotate-left"> 
 
     <p> 
 
      4 
 
     </p> 
 
     <p class="text">Text</p> 
 
     </div> 
 
    </div> 
 

 

 
    </div> 
 
</div>

來源

2017-07-25 06:11:22 Gerard

你應該添加 - > .rotate右：懸停P，.rotate左：懸停p {顏色：#fff; display：inline-block; } 顏色白色懸停 –

這是爲.text定義的。您只能在整頁模式下看到文字。 – Gerard

我現在也隱藏了數字，所以只有文本在容器內呈現。 – Gerard

.box:hover {background-color: red;font-size: 25px;}

試試這將更有利於

來源

2017-07-25 06:13:11 TVM

html/css：更改動畫flexbox-element的內容懸停

回答

相關問題