Question

我已经覆盖了两层文本，并且尝试使用：anim动画：将覆盖的文本淡出，同时将覆盖的文本淡入。

问题似乎是悬停命令只能识别上方的文本，但是我尝试使用一个悬停来激活两个图层。

我分别为每个字母制作了一个网格，因此当我将鼠标悬停在一个字母上时，它消失了，而下面的一个字母出现了。但是我只能为上方的文本设置动画，而不能为下方的文本设置动画。

仅CSS可以吗？任何信息表示赞赏！

  <section>
      <ul class="letters">
        <li class="molivi">M</li>
        <li class="molivi">O</li>
        <li class="molivi">L</li>
        <li class="molivi">I</li>
        <li class="molivi">V</li>
        <li class="molivi">I</li>
        <li class="molivi">.</li>
        <li class="design">D</li>
        <li class="design">E</li>
        <li class="design">S</li>
        <li class="design">I</li>
        <li class="design">G</li>
        <li class="design">N</li>
        <li class="design">.</li>
      </ul>
    </section>


.letters{
  list-style: none;
  display:grid;
  grid-template-columns: 4fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 4fr;
  grid-column-gap: 5px;
  font-size: 150px;
  margin: 5rem;
}
.design{
/* visibility: hidden; */ 
/* visibility or opacity, I'm not sure which one*/
opacity: 0;
}
.molivi{
  color: red;
}

.molivi:hover {opacity:0}

.design:hover{
/* visibility: visible; */
opacity:1;
}





/*WORD "MOLIVI" */

li:nth-child(1){
  grid-column: 2/ span 1;
  grid-row:  1/ span 1;
  z-index: 2;
}
li:nth-child(2){
  grid-column: 3/ span 1;
  grid-row:  1/ span 1;
  z-index: 2;
}
li:nth-child(3){
  grid-column: 4/ span 1;
  grid-row:  1/ span 1;
  z-index: 2;

}
li:nth-child(4){
  grid-column: 5/ span 1;
  grid-row:  1/ span 1;
  z-index: 2;

}
li:nth-child(5){
  grid-column: 6/ span 1;
  grid-row:  1/ span 1;
  z-index: 2;

}
li:nth-child(6){
  grid-column: 7/ span 1;
  grid-row:  1/ span 1;
  z-index: 2;
  text-align: center;
}
li:nth-child(7){
  grid-column: 8/ span 1;
  grid-row:  1/ span 1;
  z-index: 2;
}



/*WORD DESIGN*/
li:nth-child(8){
  grid-column: 2/ span 1;
  grid-row:  1/ span 1;
  /* text-align: center; */

}
li:nth-child(9){
  grid-column: 3/ span 1;
  grid-row:  1/ span 1;
  /* text-align: center; */
}
li:nth-child(10){
  grid-column: 4/ span 1;
  grid-row:  1/ span 1;
}
li:nth-child(11){
  grid-column: 5/ span 1;
  grid-row:  1/ span 1;
}
li:nth-child(12){
  grid-column: 6/ span 1;
  grid-row:  1/ span 1;
}
li:nth-child(13){
  grid-column: 7/ span 1;
  grid-row:  1/ span 1;
}
li:nth-child(14){
  grid-column: 8/ span 1;
  grid-row:  1/ span 1;
}

Answer 1

将更改悬停在容器上，相应地更改不透明度值：

loopSong = async () => {
    let currentState = await TrackPlayer.getState() //fetching current state
    if(currentState === 1){
      TrackPlayer.seekTo(1) // seekTo 1 sec
    }
}

向列表中的项目添加.letters:hover .design { opacity: 1; } .letters:hover .molivi { opacity: 0; }属性。这对他们所有人都是一样的：

transition

为每个项目添加.letters li { transition: all 0.5s ease; }。您可以通过调整该值来控制动画的速度，并根据在序列中的哪个项目上放置哪个值来控制淡入淡出的方向：

transition-delay

transition-delay: 0.1s;

.letters {
  list-style: none;
  display: grid;
  grid-template-columns: 4fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 4fr;
  grid-column-gap: 5px;
  font-size: 150px;
  margin: 5rem;
}

.letters li {
  transition: all 0.5s ease;
}

.design {
  opacity: 0;
}

.molivi {
  color: red;
  opacity: 1;
}

.letters:hover .design {
  opacity: 1;
}
.letters:hover .molivi {
  opacity: 0;
}



/*WORD "MOLIVI" */

li:nth-child(1) {
  grid-column: 2/ span 1;
  grid-row: 1/ span 1;
  z-index: 2;
  transition-delay: 0s;
}

li:nth-child(2) {
  grid-column: 3/ span 1;
  grid-row: 1/ span 1;
  z-index: 2;
  transition-delay: 0.1s;
}

li:nth-child(3) {
  grid-column: 4/ span 1;
  grid-row: 1/ span 1;
  z-index: 2;
  transition-delay: 0.2s;
}

li:nth-child(4) {
  grid-column: 5/ span 1;
  grid-row: 1/ span 1;
  z-index: 2;
  transition-delay: 0.3s;
}

li:nth-child(5) {
  grid-column: 6/ span 1;
  grid-row: 1/ span 1;
  z-index: 2;
  transition-delay: 0.4s;
}

li:nth-child(6) {
  grid-column: 7/ span 1;
  grid-row: 1/ span 1;
  z-index: 2;
  text-align: center;
  transition-delay: 0.5s;
}

li:nth-child(7) {
  grid-column: 8/ span 1;
  grid-row: 1/ span 1;
  z-index: 2;
  transition-delay: 0.6s;
}


/*WORD DESIGN*/

li:nth-child(8) {
  grid-column: 2/ span 1;
  grid-row: 1/ span 1;
  transition-delay: 0.7s;
}

li:nth-child(9) {
  grid-column: 3/ span 1;
  grid-row: 1/ span 1;
  transition-delay: 0.8s;
}

li:nth-child(10) {
  grid-column: 4/ span 1;
  grid-row: 1/ span 1;
  transition-delay: 0.9s;
}

li:nth-child(11) {
  grid-column: 5/ span 1;
  grid-row: 1/ span 1;
  transition-delay: 1s;
}

li:nth-child(12) {
  grid-column: 6/ span 1;
  grid-row: 1/ span 1;
  transition-delay: 1.1s;
}

li:nth-child(13) {
  grid-column: 7/ span 1;
  grid-row: 1/ span 1;
  transition-delay: 1.2s;
}

li:nth-child(14) {
  grid-column: 8/ span 1;
  grid-row: 1/ span 1;
  transition-delay: 1.3s;
}

将鼠标悬停在文本和叠加转换上

1 个答案: