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>

答

这是你需要什么？演示是在箱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>

你应该添加 - > .rotate右：悬停P，.rotate左：悬停p {颜色：#fff; display：inline-block; } 颜色白色悬停 –

这是为.text定义的。您只能在整页模式下看到文字。 – Gerard

我现在也隐藏了数字，所以只有文本在容器内呈现。 – Gerard

答

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

试试这将更有利于

html/css：更改动画flexbox-element的内容悬停

相关推荐