Question

我有一排四个盒子，里面有大的单个字母，它们是使用flexbox设置的，以跨越页面的整个宽度。盒子在悬停时略微旋转。

我希望盒子的内容也可以在悬停时更改，即我希望background-color转换为黑色并在鼠标悬停在框内时在框内显示paragraph个较小的文字各自的盒子。我无法理解这样做。首先，我想通过设置display: none来“隐藏”具有所需更改外观的框，然后在用户将相应的白框悬停时将其更改为inline。但是，我无法正确隐藏一个方框，因为它在某种程度上与flexbox混淆，并且隐形框也不会像白色方框那样正确旋转。

任何想法如何在悬停时实现白盒子内容和外观的变化？这是当前盒子设置的一个方面：

* {
  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>

Answer 1

这是你需要的吗？演示在方框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>

Answer 2

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

试试这个会很有帮助

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

2 个答案: