html - 将鼠标悬停在文本和叠加变换上

Question

我已经覆盖了两层文本，我尝试使用 :hover 使覆盖的文本淡出并同时使下面的文本淡入来设置动画。

http://prntscr.com/nw3tc4

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

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

只能用 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

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

.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;
}

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